ホームページ > 記事 > ウェブフロントエンド > jQueryのblur()イベントの使い方を詳しく解説
jQueryのblur()イベントの使い方を詳しく解説
- 黄舟オリジナル
- 2017-06-26 14:04:533041ブラウズ
概要
一致する要素ごとにブラーイベントをトリガーします。
この関数は、ブラウザのデフォルトの動作を含む、ブラーイベントにバインドされたすべての関数を呼び出して実行します。 false を返すことで、ブラウザのデフォルト動作のトリガーを防ぐことができます。要素がフォーカスを失ったときにブラー イベントがトリガーされます。これは、マウス操作か、一致する各要素のブラー イベントでハンドラー関数をバインドする
パラメーター
fnFunctionV1.0
のいずれかです。
[data],fnString,FunctionV1.4.3
data:blur([Data], fn) は、処理する関数 fn のデータを渡すことができます。
fn: 一致する各要素のブラー イベントにバインドされたハンドラー関数。
例
説明:
すべての段落のぼかしイベントをトリガーします
jQuery コード:
$("p").blur();説明:
いずれかの段落がフォーカスを失うと、「Hello World!」がポップアップ表示され、ぼかしイベントに関連付けられます。一致する各要素の特定の処理関数。
jQuery コード:
$("p").blur( function () { alert("Hello World!"); } );Example
フォーカスを失ったときに入力フィールドの色を変更する (ぼかし):
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});<html>
<head>
<script type="text/javascript" src="/jquery/jquery.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>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>定義と使用法blur イベントは、要素がフォーカスを失ったときに発生します。 Blur() 関数はブラー イベントをトリガーします。関数パラメーターが設定されている場合、この関数はブラー イベントの発生時に実行されるコードを指定することもできます。ヒント: 以前は、blur イベントはフォーム要素でのみ発生しました。新しいブラウザでは、このイベントは任意の要素で使用できます
触发 blur 事件触发被选元素的 blur 事件。语法$(selector).blur()<html>
<head>
<script type="text/javascript" src="/jquery/jquery.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");
});
$("#btn1").click(function(){
$("input").focus();
});
$("#btn2").click(function(){
$("input").blur();
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
</html>以上がjQueryのblur()イベントの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。