ホームページ > 記事 > ウェブフロントエンド > jqueryのフォーカスイベントとは何ですか?
jqueryのフォーカスイベントとは何ですか?
- 青灯夜游オリジナル
- 2023-03-15 13:45:163462ブラウズ
jquery フォーカス イベントは 2 つあります: 1. フォーカスはフォーカス イベントを取得します focus() メソッドを使用してフォーカス イベントをトリガーするか、フォーカス イベントの発生時に実行されるイベント処理関数を指定できます。構文「$(セレクター).フォーカス(関数)」。 2. ブラー損失イベントの場合、blur() メソッドを使用してブラー イベントをトリガーするか、ブラー イベントの発生時に実行されるイベント処理関数を「$(selector).blur(function)」という構文で指定できます。 」。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
jquery focus イベントには 2 つあります。フォーカスを取得する focus() とフォーカスを失う blur() です。
jquery 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>
#jquery Blur() がフォーカス イベントを失う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 の Blur() フォーカス イベントを失うと、これを使用してユーザーが入力ボックスに入力したコンテンツが正しいかどうかを確認できます。次のコードのように、ユーザー入力が 5 文字未満の場合は、プロンプトが表示されます。
サンプル コード:
<input type="text" name="" id="mochu">
<script>
$('#mochu').blur(function(){
if($(this).val().length < 5){
alert('字数太少了，多输入几个吧');
}
});
</script>[推奨学習:
jQuery ビデオ チュートリアル, Web フロントエンド ビデオ ]
以上がjqueryのフォーカスイベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。