JavaScript プログラミング講座

 

フォーカスについて

 


■フォーカスについて

 
<A> <INPUT> <TEXTAREA> などの要素は、フォーカスに対応しています。
 
要素にフォーカスを与えると、編集が可能な状態になります。
 
■コントロール要素のフォーカス
 
例えば、<TEXTAREA> 要素をクリックすると、フォーカスが与えられ、キーボード操作による入力が可能になります。
 
 
■フォーカスは1つ
 
フォーカスは、1つしか存在しません。
 
新しい要素にフォーカスを当てた場合、以前の選択状態は解除されます。
 


 

フォーカスを設定する

 
 


■任意の要素にフォーカスを与える

 
任意の要素に、フォーカスを与えるには、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);
 

■フォーカスが与えられたか監視する

 
onfocus イベントを使用します。
 
コールバック関数の引数から、FocusEvent オブジェクトが得られます。
 
onfocus イベントは、バブリングフェーズに対応していません。
 
onfocus プロパティを使用した場合、ターゲットから祖先へは通知されません。
 
テキストフィールドにフォーカスが与えられたか監視する

<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>
 

■フォーカスが外れたか監視する

 
onblur イベントを使用します。
 
コールバック関数の引数から、FocusEvent オブジェクトが得られます。
 
onblur イベントは、バブリングフェーズに対応していません。
 
onblur プロパティを使用した場合、ターゲットから祖先へは通知されません。
 
テキストエリアから、フォーカスが外れたか監視する

<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 41 の時点では、対応していません。
 
以下のイベントは、バブリングフェーズに対応しています。
 
イベント名 解説
"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>