ywork2020.com

Title

要素にフォーカスインイベントを登録する

目次 (INDEX)

focusinとは

ここで説明する focusin とは次の語句からなるjQueryのメソッドです。
focus
読み: フォーカス
意味: 焦点
in
読み: イン
意味: 中、~において

目次に戻る

focusinメソッドの概要

このメソッドは、セレクタに該当する既存要素にフォーカスインイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているフォーカスインイベントを呼び出します。

フォーカスインイベントは、入力要素をクリック、またはキー操作により、入力可能な状態にすることで発生します。

このイベントは、バブリングを起こします。

イベントのバブリングとは子要素にバインドしているイベントの発生が親要素に伝播して、親要素にバインドしている同種イベントも同時(子要素から順次)に発生する現象のことを言います。 バブリングは「良い」、「悪い」で判断するのではなく、そのような機能であり、状況によってメソッドを選択することが必要です。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Selector.focusin(Handler(EventObject));
Selector.focusin([EventData], Handler(EventObject));
Selector.focusin();
  • 01: フォーカスインイベントが発生した時点でハンドラーが実行されます。
  • 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
  • 03: セレクタにバインドしているフォーカスインイベントを呼び出します。

目次に戻る

サンプルコードと実行結果

ここでは、input と、その親要素の div に focusin() でイベントをバインドします。

フォーカスインは、バブリングするので 親や先祖要素に同種のイベントがバインドされていれば 子要素側から先祖要素側に向けて順にイベントが発生していきます。 これを利用して子要素のフォーカスインを発生元にして親要素のフォーカスインが発生した時点で、親要素のスタイルを変更してみたいと思います。

サンプルコード: CSS
<style>
	div{
		margin: 0.4em;
		padding: 0.4em;
		border-radius: 5px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div><input type="text" placeholder="focusin"></div>
	<div><input type="text" placeholder="focusin"></div>
	<script>...</script>
</body>
  • 06, 07: div input (div の子要素に input を配置しています。この要素らにイベントをバインドします。)
サンプルコード: script
<script>
	$("input").focusin(function(){
		strColor = "##lightpink";
	});
	$("div").focusin(function(){
		$(this).css("background-color", strColor);
	});
	$("input").focusout(function(){
		strColor = "transparent";
	});
	$("div").focusout(function(){
		$(this).css("background-color", strColor);
	});
</script>
  • 02-04: $("input").focusin(function(){}) (input要素にフォーカスインイベントをバインドします。関数では strColor 変数に「ライトピンク」の文字列を設定しています。)
  • 05-07: $("div").focusin(function(){}) (div要素にフォーカスインイベントをバインドします。関数では 自身の背景色を strColor 変数の色に設定します。)
  • 08-10: $("input").focusout(function(){}) (input要素にフォーカスアウトイベントをバインドします。関数では strColor 変数に「トランスペアレント」の文字列を設定しています。)
  • 11-13: $("div").focusout(function(){}) (div要素にフォーカスアウトイベントをバインドします。関数では 自身の背景色を strColor 変数の色に設定します。)
実行結果:

目次に戻る