jQuery實現的文字輸入字數倒計效果程式碼

antzone發表於2017-03-07
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">
$(function(){ 
  $(document).keyup(function(){ 
    var text=$("#album_name").val(); 
    var counter=text.length; 
    $("#name_word").text(counter); 
  })
}) 
</script>
</head>
<body>
<input type="text" maxlength="30" name="album_name" id="album_name"/> 
<span class="count_txt"><span id="name_word">0</span>/30</span> 
</body>
</html>

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

一.程式碼註釋:

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

2.$(document).keyup(function(){})，為document文件註冊keyup事件處理函式，這裡是利用了事件冒泡。

3. var text=$("#album_name").val()，獲取文字框中的內容。

4.var counter=text.length，獲取文字框內容字元的個數。

5.$("#name_word").text(counter); ，將當前文字框字元的個數寫入指定span元素。

二.相關閱讀:

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

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

3.length屬性可以參閱javascript String length屬性一章節。 

4.text函式可以參閱jQuery text()一章節。

5.maxlength屬性可以參閱<input> maxlength屬性一章節。 

相關文章