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 をよろしくお願いいたします。

以下もご興味があるかもしれません: