フォーカスについて
■フォーカスについて
<A> <INPUT> <TEXTAREA> などの要素は、フォーカスに対応しています。
要素にフォーカスを与えると、編集が可能な状態になります。
■コントロール要素のフォーカス
例えば、<TEXTAREA> 要素をクリックすると、フォーカスが与えられ、キーボード操作による入力が可能になります。
■フォーカスは１つ
フォーカスは、１つしか存在しません。
新しい要素にフォーカスを当てた場合、以前の選択状態は解除されます。
フォーカスを設定する
■任意の要素にフォーカスを与える
任意の要素に、フォーカスを与えるには、focus() メソッドを使用します。
HtmlElement.focus( ) :Void
| 引数 | Void | なし。 |
| 戻り値 | Void | なし。 |
テキストエリアにフォーカスを与える
<html>
<body>
<textarea id="my_textarea" >あいうえお</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "my_textarea" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var element = document.getElementById("my_textarea");
// ------------------------------------------------------------
// 5 秒後に実行される関数
// ------------------------------------------------------------
setTimeout(function (){
// 要素にフォーカスを与える
element.focus();
},1000 * 5);
//-->
</script>
</body>
</html>
■現在アクティブな要素からフォーカスを外す
■任意の要素からフォーカスを外す
blur() メソッドを使用します。
成功した場合、<BODY> 要素にフォーカスが移動します。
HtmlElement.blur( ) :Void
| 引数 | Void | なし。 |
| 戻り値 | Void | なし。 |
■現在アクティブな要素を取得する
document.activeElement プロパティを使用します。
このプロパティが、真である場合、blur() メソッドを呼び出します。
■使用例
現在アクティブな要素からフォーカスを外す
// 現在アクティブな要素を取得する
var active_element = document.activeElement;
// フォーカスを外す
if(active_element){
active_element.blur();
}
フォーカスの変化を監視する
■ドキュメント内にフォーカスが当たっているか調べる
document.hasFocus() メソッドを使用します。
別のドキュメントにフォーカスが当たっている場合、false が得られます。
ページが隠れている状態である場合も、false が得られます。
Document.hasFocus( ) :Boolean
| 引数 | Void | なし。 |
| 戻り値 | Boolean | ドキュメント内にフォーカスが当たっている場合 true が得られる。 |
ドキュメント内にフォーカスが当たっているか調べる
// ------------------------------------------------------------
// 1 秒ごとに実行される関数
// ------------------------------------------------------------
setInterval(function (){
// ドキュメント内にフォーカスが当たっているか調べる
var result = document.hasFocus();
// 出力テスト
console.log(result);
},1000 * 1);
■現在フォーカスが与えられている要素を取得する
■現在アクティブな要素を取得する
document.activeElement プロパティを使用します。
このプロパティは、読み取り専用です。
■ドキュメント内にフォーカスが無い場合
フォーカスが外れたとしても、 <BODY> 要素の選択状態は維持されます。
<BODY> 要素が存在しない場合は、null 値が得られます。
■取得例
現在フォーカスが与えられている要素を取得する
// 現在フォーカスが与えられている要素を取得する
var active_element = document.activeElement;
// 出力テスト
console.log(active_element);
■フォーカスが与えられたか監視する
テキストフィールドにフォーカスが与えられたか監視する
<html>
<body>
<textarea id="my_textarea" >あいうえお</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "my_textarea" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var element = document.getElementById("my_textarea");
// ------------------------------------------------------------
// フォーカスが与えられると実行されるイベント
// ------------------------------------------------------------
element.onfocus = function (e){
if(!e) e = window.event; // レガシー
// 出力テスト
console.log(e);
};
//-->
</script>
</body>
</html>
■フォーカスが外れたか監視する
テキストエリアから、フォーカスが外れたか監視する
<html>
<body>
<textarea id="my_textarea" >あいうえお</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// "my_textarea" という ID 属性のエレメントを取得する
// ------------------------------------------------------------
var element = document.getElementById("my_textarea");
// ------------------------------------------------------------
// フォーカスが外れると実行されるイベント
// ------------------------------------------------------------
element.onblur = function (e){
if(!e) e = window.event; // レガシー
// 出力テスト
console.log(e);
};
//-->
</script>
</body>
</html>
■フォーカスの変化を監視する（Events Level3）
Firefox 50 の時点では、対応していません。
以下のイベントは、バブルズ（Bubbles）に対応しています。
| イベント名 | 型 | 解説 |
| "focusin" | FocusEvent | フォーカスが当たると実行されるイベント |
| "focusout" | FocusEvent | フォーカスが外れると実行されるイベント |
フォーカスの変化を監視する（Event Level3）
<html>
<body>
<textarea >あいうえお</textarea> <br>
<textarea >かきくけこ</textarea> <br>
<textarea >さしすせそ</textarea> <br>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// フォーカスが当たると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("focusin" , function (e){
// 出力テスト
console.log(e.type , e);
});
// ------------------------------------------------------------
// フォーカスが外れると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("focusout" , function (e){
// 出力テスト
console.log(e.type , e);
});
//-->
</script>
</body>
</html>