ywork2020.com

Title

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

目次 (INDEX)

focusとは

ここで説明する focus とは次の語句からなるjQueryのメソッドです。
focus
読み: フォーカス
意味: 焦点

目次に戻る

focusメソッドの概要

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

フォーカスイベントは、入力要素が入力可能な状態から入力不可の状態になると発生します。

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

このメソッドに類似したメソッドとして、 focusin() がありますが、こちらはイベントのバブリングを起こしますので状況によって使い分けてください。

目次に戻る

構文

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

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

目次に戻る

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

ここでは、focus() を使ってシンプルに入力要素にフォーカスを当てます。

ただし、入力要素にマウスポインターが乗った時点で自動的にフォーカスを当てるようにしてみます。

サンプルコード: CSS
<style>
	input{
		margin: 2em;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<input type="text">
	<input type="text">
	<script>...</script>
</body>
  • 06, 07: input (テキスト入力要素です。)
サンプルコード: script
<script>
	$("input").mouseenter(function(){
		$(this).focus();
	});
</script>
  • 02-04: mouseenter() (マウスポインターが要素の上に乗ったにイベントが発生します。)
  • 03: focus() (このメソッドは引数が空の場合には、要素がフォーカスを取得します。)
実行結果:

目次に戻る