ホームページ >ウェブフロントエンド >jsチュートリアル >jQueryはtext box_jqueryのデフォルト値を設定・削除する機能を実装しています

jQueryはtext box_jqueryのデフォルト値を設定・削除する機能を実装しています

WBOY
WBOYオリジナル
2016-05-16 16:20:381042ブラウズ

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); }
})
})









上記のコードは要件を満たしています。その実装原理を簡単に紹介します。
非常に簡単で、テキスト ボックスにフォーカスとブラーのイベント ハンドラーを登録するだけです。テキスト ボックスがフォーカスを取得したときに、テキスト ボックスの内容がデフォルト値と同じであれば、テキスト ボックスはクリアされます。 . フォーカスがテキストボックスから離れたとき このとき、テキストボックスの内容が空の場合はデフォルト値に戻ります。

または、次のコードを使用します:


コードをコピー

コードは次のとおりです: $('.default-value').each(function() {
var デフォルト値 = this.value;

$(this).focus(function(){ If(this.value == デフォルト値) {

This.value = '';

}

});

$(this).blur(function(){
If(this.value == '') {
This.value = デフォルト値;

}

});

});

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。