jQuery點選文字框清除內容程式碼例項

antzone發表於2018-07-28
jQuery

本章節介紹一下文字框最簡單的一個人性化措施，就是點選文字框的時候能夠刪除裡面的提示文字。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.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> 
<input type="text" value="請輸入郵箱地址" id="email"/>
</body> 
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.$(document).ready(function(){})，當文件結構完全載入再去執行函式中的程式碼。

（2）.$("#email").focus(function(){})，為文字框註冊focus事件處理函式。

（3）.var email_txt=$(this).val()，獲取文字框的value值。

（4）.if(email_txt==this.defaultValue){$(this).val("");}，如果文字框的值和預設值相同，那麼就將文字框清空。

（5）.$("#email").blur(function(){})，為文字框註冊blur事件處理函式。

（6）.var email_txt=$(this).val()，獲取文字框的值。

（7）.if(email_txt==""){$(this).val(this.defaultValue);}，如果文字框值等於空，那麼就將文字框的值還原為預設。

二.相關閱讀：

（1）.focus事件參閱jQuery focus 事件一章節。

（2）.val()函式參閱jQuery val()一章節。 

（3）.blur事件參閱jQuery blur 事件一章節。

相關文章