ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTML フォーカス喪失イベントとは何ですか?
HTML フォーカス喪失イベントとは何ですか?
- PHPzオリジナル
- 2023-04-25 15:11:184748ブラウズ
HTML は、Web 開発で非常に一般的に使用される言語です。Web ページの構造とコンテンツを構築できます。ただし、実際の開発では、フォーカス イベントなどの HTML 要素の動作の変化を監視する必要があることがよくあります。 HTML のフォーカス喪失イベントは、ユーザーが現在の要素からフォーカスを削除したときにトリガーされるイベントです。この記事では、HTML のフォーカスを失ったイベントとは何か、および Web 開発での使用方法を紹介します。
1. HTML ロスト フォーカス イベントとは
HTML ロスト フォーカス イベントとは、ユーザーが現在の要素からフォーカスを削除したときにトリガーされるイベントを指します。実際のアプリケーションでは、フォーカスはユーザーが操作している要素またはコントロールを指します。これには、テキスト ボックス、ボタン、リンク、またはその他の HTML 要素が含まれます。ユーザーが要素を入力または操作した後、ページ上の別の場所をクリックするか、Tab キーを押して次の要素に移動すると、前の要素はフォーカスを失い、フォーカス喪失イベントがトリガーされます。
HTML フォーカス喪失イベントは、ユーザーが入力したデータの検証、操作の実行、またはユーザーが入力したコンテンツのクリアに使用できます。要素に onBlur 属性を定義することで、関数をフォーカス喪失イベントに関連付けることができます。例:
<input type="text" name="username" onBlur="checkUsername()">
上記のコードはテキスト ボックス要素を定義しており、ユーザーが要素からフォーカスを外すと、checkUsername() 関数が実行されます。
2. HTML ロスト フォーカス イベントの適用シナリオ
HTML ロスト フォーカス イベントは、さまざまなシナリオに適用できます。一般的なアプリケーション シナリオをいくつか示します:
1. フォーム検証: ユーザーがデータを入力するとき、入力ボックスがフォーカスを失ったときに、データの形式、長さなどが要件を満たしているかどうかを検証できます。
2. パスワードの照合: ユーザーがパスワードを入力するとき、2 番目の入力ボックスがフォーカスを失ったときに、入力された 2 つのパスワードが一致しているかどうかをチェックできます。
3. 自動保存: ユーザーがデータを入力または変更するとき、入力ボックスがフォーカスを失ったときに保存操作を実行して、データが失われないようにすることができます。
4. 入力プロンプト: ユーザーが入力ボックスにコンテンツを入力すると、Ajax テクノロジを使用してサーバーにリクエストを送信し、入力ボックスがフォーカスを失ったときに対応するプロンプト情報を返すことができます。
5. 印刷関数: ユーザーが入力ボックスにコンテンツを入力した後、入力ボックスがフォーカスを失ったときに印刷関数を呼び出して、印刷関数を実装できます。
3. HTML ロスト フォーカス イベントの使用方法
HTML ロスト フォーカス イベントを使用するには、次の手順が必要です:
- HTML 要素で onBlur 属性を定義し、設定しますこれは、フォーカス喪失イベントがトリガーされたときに実行される JavaScript 関数の名前です。
- フォーカス喪失イベントを処理する JavaScript 関数を作成します。たとえば、入力されたデータを検証したり、関数でアクションを実行したりできます。
次の例は、入力ボックスがフォーカスを失ったときにユーザーが入力した電話番号を確認する方法を示しています:
<html>
<head>
<script type="text/javascript">
function checkPhone(phone) {
var regex = /^1[3|4|5|7|8][0-9]{9}$/; //正则表达式，验证输入的电话号码是否合法
if (regex.test(phone.value)) {
alert("电话号码格式正确！");
} else {
alert("电话号码格式错误，请重新输入！");
phone.focus(); //使输入框重新获得焦点
}
}
</script>
</head>
<body>
请输入电话号码：<input type="text" name="phone" onBlur="checkPhone(this)">
</body>
</html>
上記のコードは、入力ボックス要素を定義します。ユーザーが入力ボックスから変更する フォーカスが外されると、checkPhone() 関数が実行され、ユーザーが入力した電話番号が正当かどうかを確認するために使用されます。入力した電話番号の形式が正しい場合は、プロンプト ボックスが表示されます。そうでない場合は、ユーザーが再入力できるようにテキスト ボックスが再フォーカスされます。
4. 概要
HTML フォーカス喪失イベントは、ユーザーが現在の要素からフォーカスを削除したときにトリガーされるイベントです。 Web 開発では、フォーム検証、パスワード照合、自動保存など、多くのアプリケーション シナリオがあります。 HTML のフォーカスを失ったイベントを使用するには、HTML 要素で onBlur 属性を定義し、それを処理する JavaScript 関数を記述する必要があります。この記事が、読者が HTML フォーカス喪失イベントをより適切に適用し、Web ページ開発の効率と品質を向上させるのに役立つことを願っています。
以上がHTML フォーカス喪失イベントとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。