Js の onblur および onfocus イベント (グラフィック チュートリアル)

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

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

「Hao123」WebサイトのBaidu検索入力ボックスのように、テキストボックスにフォーカスがかかると、その中のテキストがすべて自動的に選択されます。成し遂げる。

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

URL を入力してください

これを行うには?次のコードと説明を見てください:

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

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

2. onblur (フォーカス喪失イベント)

テキスト ボックスが正しく入力されたかどうかは、通常、ユーザーが送信ボタンをクリックした後に検出されます。リアルタイムで この検出作業を実行するには、この場合、onblur イベントが役に立ちます。

次の例には 4 つのテキスト ボックスがあります。いずれかをクリックしないと何も起こりません。ただし、何も入力されていなければ、フォーカスが設定されます (カーソルが中にあります)。他の場所をクリックしてフォーカスを失うと、警告がポップアップしますので試してみてください

名前

性別

年齢

住所

以下はコードと説明です:

フォームコード

<form name="blur_test">
   <p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
    性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
    年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
    住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>

JSコード

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("文本框里必须填写内容!");
}
</script>

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

上記は私があなたのためにまとめたものです。

関連記事:

JavaScriptがクイックソートを実装する方法のコード詳細説明

JavaScriptがカプセル化された方法でバブルソートを実装する方法

JavaScriptの動作メカニズムと概念分析の詳細説明

以上がJs の onblur および onfocus イベント (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。