jQueryはテキストボックスのデフォルト値を設定・削除する機能を実装しています-jsチュートリアル-php.cn

jQueryはテキストボックスのデフォルト値を設定・削除する機能を実装しています

韦小宝

リリース： 2017-11-28 10:00:32

オリジナル

1482 人が閲覧しました

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 イベント処理関数では、テキストボックスがフォーカスを取得すると、テキストボックスの内容がデフォルト値と同じである場合、フォーカスがテキストボックスから離れると、テキストボックスの内容がクリアされます。テキストボックスが空の場合は、デフォルト値に復元されます。

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

$(&#39;.default-value&#39;).each(function() {
       var default_value = this.value;
       $(this).focus(function(){
               if(this.value == default_value) {
                       this.value = &#39;&#39;;
               }
       });
       $(this).blur(function(){
               if(this.value == &#39;&#39;) {
                       this.value = default_value;
               }
       });
});

ログイン後にコピー

上記は、テキストボックスのデフォルト値の設定と削除の機能を実装するための jQuery の内容です。詳細については、PHP 中国語 Web サイト検索を参照してください。おお~

関連おすすめ:

jQueryアニメーションと特殊効果の詳しい説明

jQueryの秘密について

JQueryポップアップレイヤーThickBoxプラグの使い方の詳しい説明-in

以上がjQueryはテキストボックスのデフォルト値を設定・削除する機能を実装していますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。