jqueryは入力をクリックすると何らかのイベントをトリガーしますか?

入力をクリックすると「フォーカス イベント」がトリガーされ、入力要素が選択されて操作可能になることを意味し、ページ画面上で小さな縦線が点滅します。 jquery では、focus() メソッドを使用して、構文 "$(selector).focus()" または "$(selector).focus(function)" を使用して、フォーカス イベントをトリガーしたり、要素にフォーカス イベントをバインドしたりできます。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

jquery は入力をクリックして「focus focus イベント」をトリガーします。

フォーカスは関心のある領域、つまりカーソルが現在アクティブになっている位置です。ページ画面内で点滅する小さな垂直線は、Web ページ上の特定のコントロールがアクティブになっていることを示します。が選択され、操作可能になります。マウスをクリックしてカーソルを取得し、Tab キーで設定された Tabindex に従ってフォーカスを切り替えることができます。

たとえば、入力テキスト ボックスにフォーカスがある場合は、入力要素をクリックして入力テキスト ボックスに直接入力します。または、ドロップダウン リスト ボックスにフォーカスがある場合は、下矢印を押します。キーボードでリストを作成します。このプログラムには、フォーカスを獲得したときに発生するイベント (gotfocus())、フォーカスが失われたときに発生するイベント (lostfocus())、およびコントロールのフォーカスを設定するメソッド (setfocus()) もあります。フォーカスをうまく活用すると、プログラムを非常に使いやすく見せることができます。

focus イベントは、要素がフォーカスを取得したときに発生します。要素は、マウスをクリックして選択されるか、タブ キーで配置されるとフォーカスを受け取ります。

jquery focus() はフォーカス イベントを取得します

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

構文:

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)

例: 入力入力ボックスは、フォーカスを取得すると境界線の色を変更します

サンプル コード:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).focus(function(){
        $(this).css(&#39;border-color&#39;,&#39;red&#39;);
    });
</script>

マウスを押したときinput に移動し、クリックすると、input 要素が次の形式に変わります。

jq focus() イベントにより、input に CSS スタイルが追加されます

<input type="text" name="" id="mochu" style="border-color: red;">

拡張知識:blur() メソッドはフォーカス損失イベントを設定します

blur() メソッド:blur() メソッド:要素がフォーカスを失ったときにブラー イベントが発生します

構文:

//触发 blur 事件
$(selector).blur()

//将函数绑定到 blur 事件
$(selector).blur(function)

例: 入力がフォーカスを失った後、入力ボックスの内容がポップアップ表示されます

サンプル コード:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){ 
    alert($(this).val());    
    });
 </script>

実行結果は次のとおりです。図に示すように:

jq Blur() Lost focus イベントを使用してユーザー入力を確認する

Blur() が失われましたJQuery の focus イベントを使用して、ユーザーの入力をチェックできます。ボックスに入力された内容が正当であるかどうかを確認できます。次のコードのように、ユーザーが 5 文字未満を入力すると、プロンプトが表示されます。

サンプルコード:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了，多输入几个吧&#39;);
        }
    });
</script>

[推奨される学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]

以上がjqueryは入力をクリックすると何らかのイベントをトリガーしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。