表單元素預設值感應滑鼠點選清空和重置程式碼例項

antzone發表於2017-03-24

本章節介紹一下表單元素如何感應滑鼠的動作實現清空和重置value屬性值程式碼例項。

說具體點就是比較常見的，文字框中有預設的提示語，滑鼠點選以後能夠清空提示語，如果不輸入任何內容，滑鼠離開以後，文字框內容又會被重置為預設提示語。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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> 
<p><input type="button" value="提交"/></p> 
</body> 
</html>

上面的程式碼實現了我們的要求，滑鼠點選文字框就會清除預設的東西，當填寫內容的時候，顯示就是填寫的內容，如果不填寫任何內容，焦點離開文字框，文字框的內容又會恢復到預設值。

相關文章