ホームページ > 記事 > ウェブフロントエンド > HTML の onfocus 属性と onblur 属性とは何ですか?使い方?
HTML の onfocus 属性と onblur 属性とは何ですか?使い方?この記事では、onfocus 属性と onblur 属性とは何かを紹介し、onfocus 属性と onblur 属性の簡単な使い方を説明します。困っている友人は参考にしていただければ幸いです。
まず、onfocus と onblur が HTML のイベント属性であることを知っておく必要があります。次に、これら 2 つの属性について簡単に説明します。
1, onfocus イベント属性
onfocus 属性は、要素がフォーカスを取得したときにトリガーされます。つまり、、
注: onfocus 属性は、
、、、
2. Onblur イベント属性
onblur 属性は、要素がフォーカスを失ったときにトリガーされます。つまり、フォーム検証コードでよく使用されます。 、ユーザーはフォームフィールドを離れます)中央。
注:
1. onfocus 属性は、onblur 属性の反対です。
2. すべての主要なブラウザは、onfocus 属性と onblur 属性をサポートしています。
以下では、簡単なコード例を通して onfocus 属性と onblur 属性の使用法を紹介します。
html onfocus イベント属性の使用法
コード例: 入力フィールドがフォーカスを取得したときに関数をトリガーします。この関数は、入力フィールドの背景色 (黄色) を変更します。
<script> function setStyle(x){ document.getElementById(x).style.background="yellow"; } </script> <div> <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p> 用户名: <input type="text" id="fname" onfocus="setStyle(this.id)"><br> 密 码: <input type="password" id="lname" onfocus="setStyle(this.id)"> </div>
レンダリング:
html onblur イベント属性の使用
コード例: ユーザーが入力フィールドを離れたときに入力フィールドを検証します: 小文字を大文字に変換します
<script> function upperCase(){ var x=document.getElementById("fname").value document.getElementById("fname").value=x.toUpperCase() } </script> <div> <p>请输入您的姓名,然后把焦点移动到字段外:</p> 用户名(英文字符):<input type="text" name="fname" id="fname" onblur="upperCase()"> </div>
レンダリング:
概要: 上記は、この記事で紹介した HTML の onfocus および onblur イベント属性の全内容です。学習に役立つと幸いです。
以上がHTML の onfocus 属性と onblur 属性とは何ですか?使い方?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。