HTML フォーカスとキーボード イベント_html/css_WEB-ITnose

いわゆるフォーカスは、ユーザーが現在操作しているオブジェクトであり、ブラウザーの要素、タブ、ウィンドウなどです。たとえば、入力ボックスをマウスでクリックすると、入力ボックスがフォーカスになります。キーボードの Tab キーを使用すると、フォーカスをブラウザの別の要素または他の領域に移動できます。マウスとキーボードの両方を使用して、フォーカスを移動したり、フォーカスされた要素を編集したりできます。

フォーカス要素

同時に 1 つの要素のみがドキュメントのフォーカスになれます 。このフォーカス要素には JavaScript を使用してアクセスできます:

document.activeElement;

フォーカスとなる要素がない場合、デフォルトはbody 要素を activeElement として指定します。フォーカスとなる要素はCSSの:focus擬似クラスに相当します。

ただし、すべての要素をフォーカスできるわけではなく、フォーカス可能な領域を持つ DOM アンカーのみをフォーカスと呼ぶことができます:

フォーカス可能な領域

フォーカス可能な領域は、要素、要素の一部、またはユーザー エージェントによって管理される場合があります。このアンカーは Node オブジェクトであり、Node オブジェクトの位置は DOM 内のフォーカス可能な領域の位置です。現在、フォーカス可能エリア API はこのアンカーを使用してフォーカス可能エリアを操作します。

すべてのノードがフォーカス エリアを表すことができるわけではありません。ノードがフォーカス エリアになるには、いくつかの条件を満たす必要があります。次の表は、いくつかの一般的なフォーカス可能な領域とその DOM アンカーをリストしたものです:

フォーカス可能な領域	DOM アンカー
には tabindex フォーカス フラグがあり、無効な属性のない要素	要素自体
イメージマップ内の領域のグラフィック領域	img要素
などのユーザーエージェントによって提供される利用可能なフォーカス子コントロールput[type =number] 生成される上下のボタン	子コントロールを生成する要素
要素のスクロール領域	スクロール領域を生成する要素
閲覧コンテキスト内のドキュメントのビューポート。たとえば、iframe によって生成されたウィンドウ。	ビューポートが生成されるドキュメント

Tabindex フォーカス マーク

キーボードの Tab キーを使用して、現在フォーカスされている要素を順番に切り替えます。この切り替え順序に影響を与える属性は、要素の tabindex 属性です。この属性の値の範囲は 0 ～ 32767 です。値が負の場合は、フォーカス マークがなく、切り替えられないことを意味します。

ただし、tabindex が設定されているすべての要素を tab キーを使用してフォーカスに切り替えることができるわけではありません。まず、tabindex の値を負にすることはできず、disabled 属性を持つこともできません。さらに、この要素には対応するフォーカス可能な領域があり、tabindex 属性をサポートする必要があります。 HTML4 では、FORM フォーム内の要素 a、area、button、input、object、select、textarea のみが tabindex 属性をサポートすることを規定しています。

tabindex 属性が明示的に設定されていない要素は、Tab キーを使用してフォーカスに切り替えることができません。いいえ、要素に tabindex focus タグがあれば可能です。 W3C は、ユーザー エージェントが次の要素に tabindex フォーカス タグを自動的に設定することを推奨しています:

href 属性を持つ要素、

button 要素、

select 要素。 ;

textarea 要素;

menuitem 要素;

contenteditable 属性が設定された要素;

これらの要素のデフォルトの tabindex は 0 です。上記は W3C によって推奨される要素にすぎず、ブラウザーの実装によっては異なる場合があります。例えば、Chrome 41 では、上記の要素以外では、正規の tabindex が設定されていても、タブキーによる切り替えは行われません。IE や Firefox では、正規の tabindex が設定されていれば、切り替えることができます。 Tabキーで切り替えられます。

順序の切り替えルール

最初から最後までの順序は次のとおりです。

1. 要素の tabindex が 0 より大きい場合、tabindex の小さい順に切り替えます。要素は、ドキュメント内の要素に従って同じです。 出現順序を切り替えます。

3. 要素の tabindex が 0 であるか、tabindex が設定されていないか、または tabindex が有効な整数ではありません (後者の 2 つは同等です)。 tabindex=0) に、ドキュメント内の要素の出現順序に従って切り替えます。

focus & focusin 、blur & focusout

要素がアクティブな要素になると、フォーカスを取得することと同じになり、このイベントの focus イベントが発生します。要素がトリガーされます。要素がフォーカスを取得すると、通常はフォーカスを失う要素が存在し、フォーカスを失った要素がブラー イベントをトリガーします。これら 2 つのイベントはほぼ同時に発生しますが、実行順序が異なります。ブラー イベントのリスニング メソッドが最初に実行され、次にフォーカス イベントのリスニング メソッドが実行されます。

ドキュメントがロードされる前に要素はフォーカスを取得できません

フォーカスされた要素には document.activeElement を通じてアクセスできます。

フォーカスも、要素がフォーカスを取得しようとしているときにトリガーされるイベントです。フォーカスとの主な違いは、フォーカス イベントにはバブリング ステージがないことです。 focusin イベントにはバブリング ステージがあるため、この要素とそのサブ要素がいつフォーカスを取得するかを監視するために使用できます。同様に、ブラー イベントにはバブリング ステージがありませんが、フォーカスアウトにはバブリング ステージがあります。

互換性:

Firefox は focusin および focusout イベントをサポートしません。

Chrome では、フォーカスを取得する実行順序: onfocus、onfocusin、フォーカスを失う実行順序: onblur、onfocusout。 IE6、IE7、IE8、IE9、IE10 の場合、フォーカスを取得する実行順序は onfocusin、onfocus、フォーカスを失う実行順序は onfocusout、onblur です。

キーボード イベント

DOM には、常にフォーカスのある要素をターゲットとするいくつかのキーボード イベントがあります。

Keypress、keydown、keyup の違い

KeyPress は主に文字や数字などの ANSI 文字を受け取るために使用されますが、KeyDown および KeyUP イベント プロシージャは次のような KeyPress によって認識されないキーストロークを処理できます。 F1-F12)、編集キー、ナビゲーション キー、これらのキーとキーボードのシフト キーの任意の組み合わせなど。

3 つのイベントのトリガー順序は、朝から夜までです:

keydown、keypress、keyup。 Keydown および keypress イベント リスニング メソッドが実行されるとき、入力したばかりの文字はまだ入力ボックスに表示されていません。これらのイベント リスニング メソッドの実行後に挿入する必要があります。 Keyup イベント リスニング メソッドが実行されると、文字はすでに入力ボックスに表示されます。

キーを押し続けると、キー押下イベントとキーダウン イベントが一定間隔でトリガーされますが、キーを放さない限り、キーアップはトリガーされません。鍵。