Neo Inspiration

javascript で style.display したらフォーカスが消えました。

こんな感じのJSを作っていて

function clickable(){
　　　　document.getElementById(‘hidden’).style.display = “none”;
　　　　document.getElementById(‘visible’).style.display = “block”;
}

こんな感じのinput

<input type=text id=clickable onBlur=clickable() />

<input type=text id=hidden />
<input type=text id=visible />

みたいな設定になったときに
id=clickableでTABキーおすとフォーカスが消えます。
どこをクリックしてもフォーカスしません。（実際はしてるんだけどカーソルが見えない）

こんな感じ：テストHTML

たぶんhidden（描画しない設定）になったとこにフォーカスが当たってそっからでなくなる？
ような気がします。

描画しない display を 単に表示しない visiblity にすれば問題は解決するけど、
レイアウトの問題もあるので、display のままでなんとかならないかなーと試行錯誤したら
Tabを押したときに強制的にどっかをフォーカスするといいみたいです。

でもどっかフォーカスといって
document.getElementById(‘visible’).focus();

ではだめみたいです。
処理の順番の関係かな。

この場合は
document.getElementById(‘clickable’).focus();

を付け加えればうまくいきます。