jQuery實現的文字框預設值感應滑鼠動作

antzone發表於2017-03-28
jQuery

本章節介紹一下如何利用jQuery實現文字框預設值感應滑鼠動作的功能。

比如當文字框獲取滑鼠焦點的時候，預設值會被清空，當文字框沒有輸入內容，滑鼠焦點離開的時候，又會恢復到預設值。

程式碼例項:

[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> 
</body> 
</html>

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

一.實現原理:

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

二.相關閱讀:

1.focus事件可以參閱jQuery focus 事件一章節。

2.val()可以參閱jQuery val()一章節。

3.defaultValue屬性可以參閱javascript text.defaultValue一章節。

4.blur事件可以參閱jQuery blur 事件一章節。

相關文章