フォーカス要素
どの要素が焦点を合わせることができますか？デフォルトでは、フォーム要素のみがフォーカスを取得できます。フォーム要素のみが相互作用できるためです
<input type = "text" value = "223">
非型の要素の焦点を取得する方法もあります。最初にtabIndex属性を-1に設定し、次にfocus()メソッドを呼び出します。
<div id = "test" style = "height：30px; width：100px; background：lightgreen"> div </div> <button id = "btn"> div elementはフォーカスを取得</button> <script> btn.onclick = function（）{test.tabindex = -1; test.focus（）; } test.onfocus = function（）{this.style.background = 'pink';} </script>ActiveElement
document.activeElementプロパティは、DOMフォーカスを管理するために使用され、現在フォーカスを取得している要素を保存します。
[注]このプロパティは、IEブラウザによってサポートされていません
<div id = "test" style = "height：30px; width：100px; background：lightgreen"> div </div> <button id = "btn"> div element </button> <script> console.log（document.activeElement）; // <body> body> btn.onclick = function（）{console.log（）{console.activeelement（ test.focus（）; console.log（document.activeElement）; // <div>} </script>焦点を合わせてください
ページの読み込み、ユーザー入力（TABキーを押す）、 focus()メソッド、 autofocusプロパティなど、要素がフォーカスを得るには4つの方法があります。
【1】ページの読み込み
デフォルトでは、ドキュメントがただロードされた場合、ボディ要素への参照がdocument.activeElementに保存されます。ドキュメントの読み込み中、 document.activeElementの値はnullです
<script> console.log（document.activeElement）; // null </script> <body> <script> console.log（document.activeElement）; // <body> </script> </body>
【2】ユーザー入力（タブキーを押します）
ユーザーは通常、TABキーを使用してフォーカスを移動し、スペースバーを使用してフォーカスをアクティブにすることができます。たとえば、焦点がリンクにある場合は、この時点でスペースバーを押すと、リンクにジャンプします
Tabキーに関しては、 tabindex属性について言及してはなりません。 tabindex属性は、現在のHTML要素ノードがTABキーとトラバーサルの優先度によって移動されているかどうかを指定するために使用されます
1。Tabindex tabindex=-1の場合、TABキーは現在の要素をスキップします
2。Tabindex tabindex=0の場合、Tabキーが現在の要素を通過することを意味します。要素がtabindexを設定しない場合、デフォルト値は0です
3. tabindexが0より大きい場合、Tabキーが最初に通過することを意味します。値が大きいほど、優先度が小さくなります
次のコードでは、TABキーを使用する場合、ボタンがフォーカスを取得する順序は2、5、1、および3です。
<div id = "box"> <button tabindex = "3"> 1 </button> <button tabindex = "1"> 2 </button> <button tabindex = "0"> 3 </button tabindex = "-1"> 4 </button> <button tabindex = "2"> 5 </button> </div. 'pink';} </script>
【3】FOCUS（）
focus()メソッドは、ブラウザのフォーカスをフォームフィールドに設定するために使用されます。つまり、フォームフィールドをアクティブにして、キーボードイベントに応答できるようにします。
[注]前述のように、それがフォーム要素ではない場合、 tabIndexに-1に設定すると、フォーカスを得ることができます
<SPAN ID = "test1" style = "height：30px; width：100px;"> span </span> <input id = "test2" value = "input"> <button id = "btn1"> span element </button> <button id = "btn2"> input要素はフォーカス</button> <スクリプト> function（）{test1.tabindex = -1; test1.focus（）;} btn2.onclick = function（）{test2.focus（）;} </script>【4】オートフォーカス
HTML5フォームフィールドにautofocusプロパティが追加されました。このプロパティが設定されている限り、焦点はJavaScriptなしで対応するフィールドに自動的に移動できます。
[注]この属性は、フォーム要素にのみ使用できます。通常の要素がtabIndex=”-1″に設定されていても、有効になりません。
<入力オートフォーカス値= "ABC">
hasfocus（）
document.hasFocus()メソッドは、現在のドキュメント内の要素がアクティブ化されているか、焦点を獲得しているかを示すブール値を返します。ドキュメントがフォーカスを獲得したかどうかを確認することにより、ページと対話しているかどうかを知ることができます。
console.log（document.hasfocus（））; // true // 2秒以内に他のタブをクリックして、現在のページのsetimeout（）{console.log（document.hasfocus（））; // false}、2000）;焦点を失う
JavaScriptを使用してフォーカスを失う場合は、 blur()メソッドを使用する必要があります
blur()メソッドの目的は、要素からフォーカスを削除することです。 blur()メソッドを呼び出すと、焦点は特定の要素に転送されません。メソッドを呼び出す要素からフォーカスを削除するだけです
<入力ID = "test" type = "text" value = "123"> <button id = "btn1"> input要素focus </button> <button id = "btn2">入力要素はフォーカスを失います</button> <script> btn1.onclick = function（）{test.focus（）;} btn2.onclick = function（）フォーカスイベント
フォーカスイベントは、ページがFocusを獲得または失うとトリガーされます。これらのイベントを使用して、 document.hasFocus()メソッドとdocument.activeElementプロパティを使用して、ページ上のユーザーの所在を知ることができます。
フォーカスイベントには、次の4が含まれます
1。ぼやけ
要素がフォーカスを失うと、 blurイベントが発射されます。このイベントは泡立ちません
2。フォーカス
要素がフォーカスを取得すると、 focusイベントが起動されます。このイベントは泡立ちません
3。Focosin
focusinイベントは、要素がフォーカスを取得すると発射されます。このイベントはfocusイベントに相当しますが、泡立ちます
4。フォーカス
要素がフォーカスを失うと、 focusourイベントが発射されます。このイベントはぼやけイベントに相当しますが、バブル
[注] dom0レベルのイベントハンドラーをサポートするIEブラウザを除き、フォーカンおよびフォーカスアウトイベントに関して、その他のブラウザはDOM2レベルのイベントハンドラーのみをサポートしています
<div id = "box" style = "display：inline-block; padding：25px; background-color：lightsgreen;"> <div id = "boxin" style = "height：50px; width：50px; pink;"> 123 </div> </div> <button id = "btn1" 123 loses focus </button> <button id = "reset"> restore </button> <script> reset.onclick = function（）{history.go（）;} // focus（）method btn1.onclick = function（）{boxin.tabindex = -1; boxin.focus（）;} // blur（）method btn2.onclick = function（）{boxin.blur（）;} //フォーカンイベントif（boxin.addeventlistener）{boxin.addeventlistener（ 'focusin'、handler）} this.style.backgroundcolor = 'lightblue';} if（box.addeventlistener）{box.addeventlistener（ 'focusin'、handler）} else {box.onfocusin = handler;} // blur event function fnblur（）{this.style.boogncolor. fnblur; box.onblur = fnblur; </script>実行中の結果から、 focusinイベントが泡立つ可能性があることがわかります。 blurイベントは泡立つことはできません。
フォーカスイベントは、フォームディスプレイと検証によく使用されます
たとえば、フォーカスを取得したら、背景色を変更します。フォーカスを失ったら、背景色を復元して確認してください。
<div id="box"> <input id="input1" type="text" placeholder="only enter numbers"> <input id="input2" type="text" placeholder="only enter Chinese characters"> <span id="tips"></span></div><script>if(box.addEventListener){ box.addEventListener('focusin',fnIn); box.addeventlistener（ 'focusout'、fnout）;} else {box.onfocusin = fnin; box.onfocusout = fnout;}関数fnin（e）{e = e ||イベント; var Target = E.Target || E.SRCELEMENT; Target.Style.BackGroundColor = 'LightGreen';} function fnout（e）{e = e ||イベント; var Target = E.Target || E.SRCELEMENT; Target.Style.BackGroundColor = 'initial'; // if（target === input1）{if（！/^/d*$/。test（target.value.trim（）））{target.focus（）; tips.innerhtml = '数字のみを入力してください。' setimeout（function（）{tips.innerhtml = ''}、500）; }} //漢字を検証するテキストボックスの場合if（target === input2）{if（！/^[/u4e00-/u9fa5]*$/。test（target.value.trim（）））{target.focus（）; tips.innerhtml = '漢字のみを入力してください。再び入力してください。 }}}} </script>要約します
上記は、JavaScriptのフォーカス管理のすべてのコンテンツを要約することです。この記事は詳細に紹介されており、研究と仕事のための特定の参照値があります。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。