jQuery實現的輸入文字計數功能程式碼

antzone發表於2017-03-14
jQuery

在一些比較人性化的留言回覆功能中，都有這樣的設計，那就是當輸入文字的時候，能夠實現計數功能，可以提示使用者還能能夠輸入多少文字，這樣可以便於使用者選擇更合適的語言描述，下面就是一段能夠實現此功能的程式碼，需要的朋友可以進行一下借鑑。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
fieldset{
  width:800px; 
  margin-left:300px;
}
legend{
  font-sixe:16px; 
}
#num{
  font-size:28px;
  font-weight:800
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $("#content").focus(function(){ 
    if($(this).val()==this.defaultValue) { 
      $(this).val(""); 
    } 
  }).blur(function(){ 
    if($(this).val()=='') { 
      $(this).val(this.defaultValue); 
    } 
  }) 
  $("#content").keyup(function(){ 
    var words_num = 140 - $(this).val().length; 
    if(words_num < 0) { 
      $("font").css('color','red').text(words_num); 
      $(this).val($(this).val().substring(0,139))
    }
    else{ 
      $("font").text(words_num); 
    } 
  }) 
}); 
</script> 
</head> 
 
<body> 
<fieldset> 
  <legend>釋出框</legend> 
  <form action="#" id="form1">
  您還可以輸入<span id="num"><font color="green">140</font></span>個字 
  <textarea cols="96" rows="8" id="content">螞蟻部落歡迎您</textarea> 
  <input type="button" id="send" value="釋出"/> 
</form> 
</fieldset> 
</body> 
</html>

以上程式碼實現了我們的要求，可以實現輸入文字倒數計時效果，下面介紹一下它的實現過程。

一.程式碼註釋:

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

2.$("#content").focus(function(){ 

    if($(this).val()==this.defaultValue) { 

      $(this).val(""); 

    } 

})

為文字框註冊focus事件處理函式，此函式的功能可以判斷文字框中的內容是否為預設值，如果是則清空。

3.blur(function(){ 

    if($(this).val()=='') { 

      $(this).val(this.defaultValue); 

    } 

}) 

為文字框註冊blur事件處理函式，此函式可以判斷文字框的值是否為空，如果是，則將文字框的內容設定為原來預設值。

4.$("#content").keyup(function(){})，為文字框註冊keyup事件處理函式。

5.var words_num = 140 - $(this).val().length，獲取還可以輸入文字的個數。

6.if(words_num < 0) { 

   $("font").css('color','red').text("0");

   $(this).val($(this).val().substring(0,139))

}

如果文字已經超出，那麼就將還可以輸入的文字設定為0，並將其設定為紅色，並刪除超出的文字。

7.else{ 

  $("font").text(words_num); 

} 

如果沒有超出，則顯示還可以輸入的文字數目。

二.相關閱讀:

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

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

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

（4）.keyup事件可以參閱jQuery keyup事件一章節。

（5）.css()函式可以參閱jQuery css()一章節。

（6）.text()函式可以參閱jQuery text()一章節。

（7）.substring()函式可以參閱javascript String substring()一章節。

相關文章