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

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

亚连

リリース： 2018-05-18 15:26:50

オリジナル

3376 人が閲覧しました

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 サイトの他の関連記事を参照してください。