javascript で style.display したらフォーカスが消えた
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();
を付け加えればうまくいきます。