English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
焦点要素
どの要素が焦点を取得できるか？デフォルトでは、フォーム要素のみが焦点を取得できます。なぜなら、フォーム要素のみがインタラクティブだからです
<input type="text" value="223">
非フォーム要素に焦点を当てる方法もあり、まず tabIndex 属性を設定します-1、再呼び出し focus() メソッド
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">div要素が焦点を得る</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要素が焦点を得る</button>
<script>
console.log(document.activeElement);//<body>
btn.onclick = function(){
console.log(document.activeElement);//<button>
test.tabIndex = -1;
test.focus();
console.log(document.activeElement);//<div>
}
</script>
焦点を得る
要素が焦点を得る方法は4種類、ページ読み込み、ユーザー入力（タブキー押下）、focus()メソッド、autofocus属性が含まれます
【1】ページ読み込み
デフォルトでは、ドキュメントが最初に読み込まれたとき、document.activeElementにはbody要素の参照が保存されます。ドキュメントの読み込み中、document.activeElementの値はnullです
<script> console.log(document.activeElement);//null </script> <body> <script> console.log(document.activeElement);//<body> </script> </body>
【2】ユーザー入力(タブキー押下)
ユーザーは通常、タブキーを使用して焦点を移動し、スペースキーを使用して焦点をアクティブにすることができます。たとえば、リンクに焦点が当たっている場合、スペースキーを一度押すと、そのリンクに移動します
tabキーについて話すと、tabindex属性を忘れてはならない。tabindex属性は、HTML要素ノードがタブキーで巡回されるかどうか、および巡回の優先順位を指定します
1、tabindex=-1、タブキーは現在の要素をスキップします
2、tabindexが0の場合、タブキーは現在の要素を巡回します。要素にtabindexが設定されていない場合、デフォルト値は0です
3、tabindexが0以上の場合、タブキーが優先的に巡回されます。値が大きいほど、優先順位が低くなります
以下のコードでは、タブキーを使用するとき、ボタンの焦点を得る順序は2、5、1、3
<div id="box">
<button tabindex="3">1</button>
<button tabindex="1">2</button>
<button tabindex="0">3</button>
<button tabindex="-1">4</button>
<button tabindex="2">5</button>
</div>
<script>
box.onkeyup = function(){
document.activeElement.style.background = '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要素が焦点を得る</button>
<button id="btn2">input要素が焦点を得る</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>
【4】autofocus
HTML5フォームフィールドにautofocus属性が追加されました。この属性を設定することで、javascriptを使用せずに自動的に焦点を移動させることができます
[注意]この属性はフォーム要素にのみ使用できます。通常の要素にtabIndex=""と設定しても効果がありません-1″も効果がありません
<input autofocus value="abc">
hasFocus()
document.hasFocus()メソッドはブール値を返し、現在のドキュメントに要素がアクティブまたは焦点を持っているかどうかを示します。ドキュメントが焦点を持っているかどうかを検出することで、ページとのインタラクションが行われているかどうかを知ることができます
console.log(document.hasFocus());//true
//2秒以内に他のタブをクリックして、現在のページから焦点を外します
setTimeout(function(){
console.log(document.hasFocus());//false
,2000);
焦点を失う
要素が焦点を失うようにjavascriptを使用する場合、blur()メソッドを使用する必要があります
blur()メソッドの作用は要素から焦点を取り除くことです。blur()メソッドを呼び出すとき、特定の要素に焦点を移動することはありません；単にこのメソッドを呼び出した要素から焦点を取り除くだけです
<input id="test" type="text" value="123">
<button id="btn1">input要素が焦点を得る</button>
<button id="btn2">input要素が焦点を失う</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
焦点イベント
焦点イベントはページに焦点が当たるまたは失われる時に発生します。これらのイベントとdocument.hasFocus()メソッド及びdocument.activeElement属性を組み合わせることで、ユーザーのページ内の動きを把握できます
焦点イベントは以下を含んでいます4個
1、blur
blurイベントが要素から焦点が失われる時に発生します。このイベントはバブルしません
2、focus
focusイベントが要素に焦点が当たると発生します。このイベントはバブルしません
3、focusin
focusinイベントが要素に焦点が当たると発生します。このイベントはfocusイベントと等価ですが、バブルします
4、focusout
focusoutイベントは要素がフォーカスを失ったときにトリガーされます。このイベントはblurイベントと同価ですが、バブルが可能です
[注意]focusinおよびfocusoutイベントについて、IEブラウザ以外のブラウザではDOM0レベルのイベントハンドラをサポートしておらず、DOM2イベントハンドラ
<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
<div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div>
</div>
<button id="btn1">内容は123するdiv要素がフォーカスを取得したとき/button>
<button id="btn2">内容は123するdiv要素がフォーカスを失ったとき/button>
<button id="reset">リセット</button>
<script>
reset.onclick = function(){history.go();}
//focus()メソッド
btn1.onclick = function(){
boxIn.tabIndex= -1;
boxIn.focus();
}
//blur()メソッド
btn2.onclick = function(){
boxIn.blur();
}
//focusinイベント
if(boxIn.addEventListener){
boxIn.addEventListener('focusin',handler)
}else{
boxIn.onfocusin = handler;
}
function handler(){
this.style.backgroundColor ='lightblue';
}
if(box.addEventListener){
box.addEventListener('focusin',handler)
}else{
box.onfocusin = handler;
}
//blurイベント
function fnBlur(){
this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>
実行結果から、focusinイベントはバブル可能であり、一方でblurイベントはバブル不可です
フォーカスイベントは、フォームの表示と確認によく使用されます
例えば、フォーカスを取得したときに背景色を変更し、フォーカスを失ったときに背景色を元に戻して確認
<div id="box">
<input id="input"1" type="text" placeholder="数字のみ入力可"
<input id="input"2" type="text" placeholder="只可以输入汉字">
<span id="tips"></span>
</div>
<script>
if(box.addEventListener){
box.addEventListener('focusin',fnIn);
box.addEventListener('focusout',fnOut);
}else{
box.onfocusin = fnIn;
box.onfocusout = fnOut;
}
function fnIn(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'lightgreen';
}
function fnOut(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'initial';
//如果是验证数字的文本框
if(target === input1{
if(!/^\d*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = '只能输入数字，请重新输入'
setTimeout(function(){
tips.innerHTML = ''
,500);
}
}
//如果是验证汉字的文本框
if(target === input2{
if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = '只可以输入汉字，请重新输入'
setTimeout(function(){
tips.innerHTML = ''
,500);
}
}
}
</script>
まとめ
これで、皆さんにJavaScriptのフォーカス管理に関する全ての内容をまとめました。この記事は非常に詳細で、皆さんの学習や仕事に対して参考になるでしょう。何かご不明な点があれば、コメントを残してください。