文字框獲得和失去焦點程式碼例項

admin發表於2017-03-09

很多文字框都有這樣的功能，那就是當它獲得或者失去焦點的時候能夠設定它的樣式，下面就通過程式碼例項介紹一下如何使用jQuery實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.focus{
  border:1px solid #f00;
  background:#fcc;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $(":input").focus(function(){
    $(this).addClass("focus");
    if($(this).val() ==this.defaultValue){  
      $(this).val("");           
    } 
  }).blur(function(){
    $(this).removeClass("focus");
    if ($(this).val() == '') {
      $(this).val(this.defaultValue);
    }
  });
})
</script>
</head>
<body>
<form action="" method="post" id="regForm">
  <fieldset>
    <legend>個人基本資訊</legend>
    <div>
      <label  for="username">名稱:</label>
      <input id="username" type="text" value="請輸入使用者名稱" />
    </div>
    <div>
      <label for="pass">密碼:</label>
      <input id="pass" type="password" value="請輸入密碼" />
    </div>
    <div>
      <label for="msg">詳細資訊:</label>
      <textarea id="msg" rows="2" cols="20">螞蟻部落歡迎您</textarea>
    </div>
  </fieldset>
</form>
</body>
</html>

以上程式碼實現了我們的要求，當點選文字框的時候能夠設定文字框的等元素的樣式，當焦點離開的時候也可以恢復預設值，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當穩當結構完全載入完畢再去執行函式中的程式碼。

2.$(":input").focus(function(){})，為input元素註冊focus事件處理函式。

3.$(this).addClass("focus")，為當前的input元素新增樣式類focus。

4.if($(this).val() ==this.defaultValue){$(this).val("");}，如果當前input元素的value屬性值和預設值相同，就將value值設定為空。

5.blur(function(){})，註冊blur事件處理函式，當然這裡用了鏈式呼叫方式。

6.$(this).removeClass("focus")，移除樣式類focus。

7.if ($(this).val() == '') {$(this).val(this.defaultValue);}，如果當前value值等於空，那麼就還原為預設值。

二.相關閱讀:

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

2.addClass()函式可以參閱jQuery addClass()一章節。 

3.val()函式可以參閱jQuery val()方法一章節。

4.removeClass()可以參閱jQuery removeClass()一章節。

相關文章