javascript實時顯示文字框輸入字數

antzone發表於2017-04-11
JavaScript

本章分享一段程式碼例項，它實現實時顯示textarea文字框輸入字元數目的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function CountWords(obj, show_id) {
  var fullStr = obj.value;
  var charCount = fullStr.length;
  document.getElementById(show_id).innerHTML = charCount;
}
window.onload = function () {
  var txt = document.getElementsByTagName("textarea")[0];
  txt.onkeyup = function () {
    CountWords(this, 'show')
  }
}
</script>
</head>
<body>
<form>
<textarea cols="40" rows="5" name="antzone"></textarea>
</form>
<div id="show">0</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程:

一.程式碼註釋:

（1）.function CountWords(obj, show_id) {},第一個引數是文字框物件，第二個引數是顯示字元的id。

（2）.var fullStr = obj.value，將文字框的值賦值給變數fullStr。

（3）.var charCount = fullStr.length，獲取輸入字元的個數。

（4）.document.getElementById(show_id).innerHTML = charCount，字元的數目寫到div元素彙總。

（5）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（6）.var txt = document.getElementsByTagName("textarea")[0]，獲取文字框物件。

（7）.txt.onkeyup = function () {

  CountWords(this, 'show')

}，為文字框註冊onkeyup時間，每一次按鍵彈起，就會計算一次字元的數目。

二.相關閱讀:

（1）.value屬性可以參閱javascript textarea.value屬性一章節。

（2）.length屬性可以參閱javascript String length一章節。

（3）.innerHTML屬性可以參閱innerHTML一章節。

（4）.getElementsByTagName()可以參閱document.getElementsByTagName()一章節。

（5）.onkeyup事件可以參閱javascript keyup事件一章節。

相關文章