jQueryのblur()イベントの使い方を詳しく解説-jsチュートリアル-php.cn

jQueryのblur()イベントの使い方を詳しく解説

黄舟

リリース： 2017-06-26 14:04:53

オリジナル

3116 人が閲覧しました

概要

一致する要素ごとにブラーイベントをトリガーします。

この関数は、ブラウザのデフォルトの動作を含む、ブラーイベントにバインドされたすべての関数を呼び出して実行します。 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 サイトの他の関連記事を参照してください。