JSでのonblurとonfocusイベント応用入門_基礎知識

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

1. onfocus (フォーカス イベントの取得)
テキスト ボックスがフォーカスを取得すると、その中のテキストが「Hao123」Web サイトの Baidu 検索入力ボックスと同様に自動的に表示されます。選択すると、そのような操作はオンフォーカスを使用して実現できます。
マウス ポインターが次のテキスト ボックス上に移動すると、その中のテキストがすべて選択されます:
URL を入力してください
これを行うには?次のコードと説明を見てください:

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

2. onblur (フォーカス喪失イベント)
実際には、テキスト ボックスが正しく入力されたかどうかを検出することがよくあります。 , コントロールがフォーカスを失った場合、この検出作業をリアルタイムで実行できます。この場合、onblur イベントが役に立ちます。
次の例には 4 つのテキスト ボックスがあります。いずれかをクリックしないと何も起こりません。ただし、入力すると、そのテキスト ボックスがフォーカスされます (入力カーソルが内側にあります)。何もせず、別の場所をクリックしてフォーカスを失うと、警告がポップアップします。
名前
性別
年齢
住所

を試してください。以下はコードと説明です。 :
フォーム コード

コードをコピー コードは次のとおりです:

名前 ;br>
性別

年齢

住所

JS コード

コードをコピーします コードは次のとおりです:

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