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();

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

Leave a Reply