ホームページ > 記事 > ウェブフロントエンド > JavaScript がフォーカスを処理する方法
JavaScript がフォーカスを処理する方法
- 藏色散人オリジナル
- 2021-10-18 14:11:542255ブラウズ
JavaScript でフォーカスを処理する方法: 1. "field.focus();" メソッドを通じてフォーカスを取得します; 2. "o[i].blur = function(){.. .}" メソッドのフォーカス。
この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター
JavaScript はどのように処理しますか集中？
JavaScript フォーカス処理 (フォーカスの取得、フォーカスぼかしの喪失)
フォーカス処理
フォーカス処理には、主にフォーカス (フォーカスの取得) とブラー (フォーカスの喪失) イベント タイプ。いわゆるフォーカスは、キーボード イベントに応答できるようにフォーム フィールドをアクティブにすることです。
Get focus: focus
このイベントは、クリックするか Tab キーを使用してフォーム要素またはハイパーリンク オブジェクトに切り替えるとトリガーされます。 focus イベントは、ページ内のマウスの現在位置を決定する方法です。デフォルトでは、文書全体にフォーカスが当てられていますが、クリックまたは Tab キーを使用してフォーカス位置を変更できます。 '
例: ページが読み込まれた後、フォームの最初のテキスト ボックス フィールドにフォーカスを移し、ユーザー入力を受け取る準備をします
<form id="myform" method="post" action="#">
姓名<input type="text" name="name"/><br>
密码<input type="password" name="pass" /></form>
<script>
var form = document.getElementById("myform");
var field = form.elements("name");
window.onload = function(){
field.focus();
}
</scriipt>フォーカスを失いました: ブラー
ブラー イベント タイプは、要素がフォーカスを失ったときの応答を表します。これはフォーカス イベント タイプに対応し、主にフォーム要素とハイパーリンク オブジェクトに影響します。
例: すべての入力フォーム要素のフォーカスおよび Blur イベント ハンドラーは、要素がフォーカスを獲得したときに上昇し、フォーカスを失ったときに沈むように要素を設定するようにバインドされています。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title> </head> <body>
<input type="text" />
<input type="text" />
<script>
var o = document.getElementsByTagName("input");
for(var i = 0; i < o.length; i++){
o[i].onfocus = function(){
this.style.borderStyle = "outset";
}
o[i].blur = function(){
this.style.borderStyle = "inset";
} }
</script>
</body></html>
注: フィールドが非表示の場合 ()、または CSS 表示と可視性を使用してフィールド表示を非表示にします。フォーカスを取得するように設定すると、例外が発生します。
推奨学習: 「JavaScript 基本チュートリアル」
以上がJavaScript がフォーカスを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。