JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを失ったりするイベントがあり、マウスやキーボードの操作に応じて事前設定された操作をトリガーできます。この記事では、テキスト ボックスがフォーカスを取得したり失ったりする例を使用して、onfocus と onblur の適用について簡単に説明します。

1. onfocus (フォーカスイベントを取得)

テキスト ボックスにフォーカスが当たると、その中のすべてのテキストが自動的に選択されます。これは、「hao123」Web サイトの Baidu 検索入力ボックスと同じです。この操作は、onfocus を使用して実行できます。

次のテキスト ボックスの上にマウス ポインターを移動すると、ボックス内のすべてのテキストが選択されます。

URLを入力してください

これはどうやって行うのですか?次のコードと説明を参照してください。

<input type="text" name="url" value="http://www.gxblk.com" size="30" usemean="this.focus();this.select();">

コードでは、input タグに onmousemove (マウス ポインターが通過する) イベントの JS ステートメントが埋め込まれています。等号の後の this.focus() は、フォーカスを取得することを意味します。フォーカスを取得すると、入力カーソルがテキスト ボックスに表示されますが、その中のすべてのテキストを選択するには、this.select() ステートメントを使用する必要があります。これは、テキスト ボックス内のすべてのテキストを選択することを意味します。

2. onblur（フォーカス喪失イベント）

テキスト ボックスが正しく入力されているかどうかは、よく確認します。通常、この検出は、ユーザーが送信ボタンをクリックした後に実行されます。実際、コントロールがフォーカスを失うと、この検出をリアルタイムで実行できます。この場合、onblur イベントが役立ちます。

次の例には 4 つのテキスト ボックスがあります。いずれもクリックしていない場合は何も起こりません。ただし、いずれかをクリックしてフォーカスを置いた場合 (入力カーソルがその中にある場合)、何も入力せずに別の場所をクリックしてフォーカスが失われると、警告が表示されます。試してみてください。

名前

性別

年

住所

コードと説明は次のとおりです。

フォームコード

<フォーム名="blur_test">

   <p>名前<input type="text" name="name"value="" size="30"οnblur="chkvalue(this)"><br>

    性別<inputtype="text" name="sex" value=""size="30" οnblur="chkvalue(this)"><br>

    年齢<inputtype="text" name="age" value=""size="30" οnblur="chkvalue(this)"><br>

    住所<inputtype="text" name="addr" value=""size="30" οnblur="chkvalue(this)"></p>

</フォーム>

JSコード

<scriptlanguage="javascript">
関数 chkvalue(txt) {
   if(txt.value=="") alert("テキストボックスに入力する必要があります!");

}
</スクリプト>

フォーム コードでは、各ボックス コードに onblur JS ステートメントが埋め込まれており、次の JS コードでカスタム関数 chkvalue(this) を呼び出します。つまり、テキスト ボックスがフォーカスを失うと、chkvalue() 関数が呼び出されます。この chkvalue() 関数は、テキスト ボックスが空かどうかを検出し、空の場合は警告ウィンドウがポップアップ表示されます。この関数には 1 つのパラメーター (txt) があり、これは、前のテキスト ボックスが関数を呼び出すために使用したパラメーター (this)、つまり、それ自体に対応します。

JavaScript onblur および onfocus イベントの詳細な説明については、これで終わりです。より関連性の高い js onblur および onfocus イベントの内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。