首頁 >web前端 >js教程 >jQuery實作設定、移除文字方塊預設值功能

jQuery實作設定、移除文字方塊預設值功能

韦小宝原創: 2017-11-28 10:00:321486瀏覽

jQuery實作的文字方塊預設值感應滑鼠動作，本章節介紹如何利用jQuery實作文字方塊預設值感應滑鼠動作的功能。有jQuery程式碼哦~

例如當文字方塊取得滑鼠焦點的時候，預設值會被清空，當文字方塊沒有輸入內容，滑鼠焦點離開的時候，又會恢復到預設值。
程式碼實例:

<!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>

上面的程式碼實現了我們的要求，下面簡單介紹一下它的實作原理：

非常的簡單，就是為文字方塊註冊focus和blur事件處理函數，當文字方塊取得焦點的時候，如果文字方塊的內容和預設值相同，那麼就會清空文字方塊，當焦點離開文字方塊的時候，如果文字方塊的內容為空，那麼就會恢復到預設值。

或使用下面的程式碼：

$(&#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中文網搜尋喔~

相關推薦：

#jQuery動畫與特效詳解

關於 jQuery的秘密

Jquery彈出層ThickBox外掛程式的使用詳解

以上是jQuery實作設定、移除文字方塊預設值功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript分秒倒數計時器實作方法下一篇：JavaScript分秒倒數計時器實作方法

看更多