ホームページ > 記事 > ウェブフロントエンド > JavaScript がフォーカスを取得および失う仕組み
JavaScript がフォーカスを取得および失う仕組み
- 醉折花枝作酒筹転載
- 2021-04-29 09:17:374239ブラウズ
この記事では、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>フォーカスを失いました:ブラー
#ブラー イベント タイプは、要素がフォーカスを失ったときの応答を表します。これはフォーカス イベント タイプに対応し、主にフォーム要素とハイパーリンク オブジェクトに影響します。例: フォーカスとブラーは、すべての入力フォーム要素にバインドされます。イベント ハンドラー関数で、要素がフォーカスを取得したときに浮き上がり、フォーカスを失ったときに沈むように要素を設定します。#
<!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>
##注: フィールドが非表示の場合 (
[推奨学習:
JavaScript 上級チュートリアル以上がJavaScript がフォーカスを取得および失う仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。