ホームページ > 記事 > ウェブフロントエンド > jQueryはテキストボックスのデフォルト値を設定・削除する機能を実装しています
jQueryはテキストボックスのデフォルト値を設定・削除する機能を実装しています
- 韦小宝オリジナル
- 2017-11-28 10:00:321383ブラウズ
jQueryで実装されたテキストボックスのデフォルト値はマウスの動きを感知しますこの章ではjQueryを使ってマウスの動きを感知するテキストボックスのデフォルト値の機能を実装する方法を紹介します。 jQuerycode~
があります。例えば、テキストボックスにマウスフォーカスが移るとデフォルト値がクリアされ、テキストボックスに入力内容がなくマウスフォーカスが離れるとデフォルト値に戻ります。価値。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>程序员之家</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="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);
}
})
})
</script>
</head>
<body>
<p><input type="text" value="请输入邮箱地址" id="email"/></p>
</body>
</html>
上記のコードは、その実装原理を簡単に紹介します:
それは非常に簡単で、テキストのフォーカスとブラーを登録するだけです。 box イベント処理 関数では、テキスト ボックスがフォーカスを取得すると、テキスト ボックスの内容がデフォルト値と同じである場合、フォーカスがテキスト ボックスから離れると、テキスト ボックスの内容がクリアされます。テキスト ボックスが空の場合は、デフォルト値に復元されます。
または次のコードを使用します:
$('.default-value').each(function() {
var default_value = this.value;
$(this).focus(function(){
if(this.value == default_value) {
this.value = '';
}
});
$(this).blur(function(){
if(this.value == '') {
this.value = default_value;
}
});
});上記は、テキスト ボックスのデフォルト値の設定と削除の機能を実装するための jQuery の内容です。詳細については、PHP 中国語 Web サイト検索を参照してください。おお~
関連おすすめ:
JQueryポップアップレイヤーThickBoxプラグの使い方の詳しい説明-in
以上がjQueryはテキストボックスのデフォルト値を設定・削除する機能を実装していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。