【JavaScript】テキストボックスに当てられたフォーカスを外す方法

今回はタイトル通り、Webサイトなどでテキストボックスに当てられたフォーカスを解除する方法です。
パソコンでは特に問題ないのですが、スマートフォン、特にAndroidでフォーカスが外れなかったために、ソフトフェアキーボードが消えず、ちょっと面倒な目にあったんですよね…。

で、肝心の方法ですが、フォーカスを外したいタイミングで下の3行を実行するだけ。

// 現在アクティブな要素を取得する
var active_element = document.activeElement;
// フォーカスを外す
if(active_element){
  active_element.blur();
}

いたってシンプル&簡単です!

 

ただ、この処理は要素からフォーカスを外すだけなので、逆に指定した要素にフォーカスを当てたい場合は下記のように記述します。

var element = document.getElementById("フォーカスを当てたい要素のID"); 
element.focus(); // カーソルを合わせる

 

ということで、要素からフォーカスを外す方法でした。
そこまで使用頻度は高くなさそうですが、覚えておけば便利かも?
もし、使う場面があれば、是非ご活用ください。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG