JavaScriptのフォーカスイベントとは何ですか-フロントエンドQ&A-php.cn

JavaScriptのフォーカスイベントとは何ですか

WBOY

リリース： 2022-01-28 15:06:59

オリジナル

6255 人が閲覧しました

フォーカスイベント: 1. focus() メソッドを使用して、フォーカスイベントを取得する要素を設定します。構文は "$(selector).focus(function)" です。 2. Blur() メソッドを使用します。要素にフォーカス喪失イベントを設定するには、構文は "$(selector).focus(function)" または "$(selector).blur(function)" です。

JavaScriptのフォーカスイベントとは何ですか

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript フォーカスイベントとは

フォーカスイベントは、要素がフォーカスを取得したときに発生します。

要素がマウスクリックによって選択されるか、タブキーによって配置されると、その要素はフォーカスを取得します。

focus() メソッドは、フォーカスイベントをトリガーするか、フォーカスイベントの発生時に実行する関数を指定します。

構文は次のとおりです:

$(selector).focus()

ログイン後にコピー

または:

$(selector).focus(function)

ログイン後にコピー

blur イベントは、要素がフォーカスを失ったときに発生します。

blur() メソッドは、blur イベントをトリガーするか、blur イベントの発生時に実行する関数を指定します。

構文は次のとおりです:

$(selector).blur()

ログイン後にコピー

または:

$(selector).blur(function)

ログイン後にコピー

例は次のとおりです:

<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>

ログイン後にコピー

出力結果:

JavaScriptのフォーカスイベントとは何ですか