jQuery によって実装されるテキスト ボックスのデフォルト値は、マウスの動きを感知します。
この章では、jQueryを使ってテキストボックスのデフォルト値でマウスの動きを検知する機能を実現する方法を紹介します。
たとえば、テキスト ボックスにマウス フォーカスが移ると、デフォルト値がクリアされ、テキスト ボックスに入力がなくマウス フォーカスが離れると、デフォルト値に戻ります。
コード例:
<頭>
スクリプト ホーム
<スクリプト src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$("#email").focus(function(){
var email_txt = $(this).val();
If(email_txt == this.defaultValue){
$(this).val("");
}
})
$("#email").blur(function(){
var email_txt = $(this).val();
If (email_txt == "") {
$(this).val(this.defaultValue);
}
})
})
上記のコードは要件を満たしています。その実装原理を簡単に紹介します。
非常に簡単で、テキスト ボックスにフォーカスとブラーのイベント ハンドラーを登録するだけです。テキスト ボックスがフォーカスを取得したときに、テキスト ボックスの内容がデフォルト値と同じであれば、テキスト ボックスはクリアされます。 . フォーカスがテキストボックスから離れたとき このとき、テキストボックスの内容が空の場合はデフォルト値に戻ります。
または、次のコードを使用します:
コードをコピー
var デフォルト値 = this.value;
$(this).focus(function(){
If(this.value == デフォルト値) {
This.value = '';
}
});
$(this).blur(function(){
If(this.value == '') {
This.value = デフォルト値;
}
});
});
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
