ホームページ > 記事 > ウェブフロントエンド > jQueryにフォーカスイベントはありますか？
jQueryにフォーカスイベントはありますか？
- 青灯夜游オリジナル
- 2022-12-16 11:31:282163ブラウズ
jquery にはフォーカス イベントがあります。要素がフォーカスを取得すると、フォーカス イベントが発生します。jquery では、focus() メソッドを使用してフォーカス イベントをトリガーしたり、構文 "$(selector) を使用して、フォーカス イベントの発生時に実行されるイベント処理関数を指定したりできます。 ).focus(関数)」。要素がフォーカスを失うと、ブラー イベントが発生します。jquery は、blur() メソッドを使用してブラー イベントをトリガーしたり、ブラー イベントの発生時に実行するイベント ハンドラーを指定したりできます。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。
フォーカスは関心のある領域、つまりカーソルが現在アクティブになっている位置です。ページ画面内で点滅する小さな垂直線は、Web ページ上の特定のコントロールが選択されていることを示します。操作される。マウスをクリックしてカーソルを取得し、Tab キーで設定された Tabindex に従ってフォーカスを切り替えることができます。
たとえば、テキスト ボックスがフォーカスを取得した場合、キーボードで入力した文字はテキスト ボックスに直接入力されます。または、ドロップダウン リスト ボックスがフォーカスを取得した場合は、下矢印を押します。キーボードを押すとリストが作成されます。このプログラムには、フォーカスを獲得したときに発生するイベント (gotfocus())、フォーカスが失われたときに発生するイベント (lostfocus())、およびコントロールのフォーカスを設定するメソッド (setfocus()) もあります。フォーカスをうまく活用すると、プログラムを非常に使いやすく見せることができます。
#jquery は focus イベントを取得します
要素がフォーカスを取得すると、focus イベントが発生します。 要素がマウスクリックによって選択されるか、タブキーによって配置されると、その要素はフォーカスを取得します。 focus() メソッドは、フォーカス イベントをトリガーするか、フォーカス イベントの発生時に実行する関数を指定します。 構文//触发 focus 事件 $(selector).focus() //将函数绑定到 focus 事件 $(selector).focus(function)関数: オプション。フォーカス イベントが発生したときに実行される関数を指定します。 #例: focus() メソッドがフォーカスを取得
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.1.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
});
</script>
</head>
<body>
输入你的名字: <input type="text">
</body>
</html>
blur イベントは、要素がフォーカスを失ったときに発生します。
blur() メソッドは、blur イベントをトリガーするか、blur イベントの発生時に実行する関数を指定します。 ヒント: このメソッドは、focus() メソッドと一緒によく使用されます。 文法//为被选元素触发 blur 事件： $(selector).blur() //添加函数到 blur 事件： $(selector).blur(function)
例:blur() メソッドがフォーカスを失う
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").focus(function() {
$("input").css("background-color", "#FFFFCC");
});
$("input").blur(function() {
$("input").css("background-color", "#D6D6FF");
});
});
</script>
</head>
<body>
用户名: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>
[推奨学習:
jQuery ビデオ チュートリアル
Web フロントエンド ビデオ ]
以上がjQueryにフォーカスイベントはありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。