Javascript實現(xiàn)字數(shù)統(tǒng)計

更新時間：2015年07月03日 10:27:22 投稿：hebedich

現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗。

字數(shù)統(tǒng)計功能，原理是給textarea添加onKeyup事件，事件讀取textarea內(nèi)容并獲得長度，并賦值給統(tǒng)計字數(shù)的那個文本節(jié)點，這里有一點要注意的是添加onKeypress和onKeydown事件也能實現(xiàn)效果，但都有些不足，會在某些情況下造成誤解，我都試了下，感覺只用一個onKeyup事件是最明智的選擇。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試文件</title>
<script>
function cal_words(){
  var length = document.getElementById("test").value.length;
  document.getElementById("num").innerHTML = length;
}
</script>
</head>

<body>
<div class="reply">
 <textarea id="test" onKeyUp="cal_words()"></textarea>
 <div>字數(shù)：<span id="num">0</span></div>
</div>
</body>
</html>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

使用原生JS快速寫出一個五子棋小游戲
五子棋游戲是一款大家耳熟能詳?shù)囊嬷穷愑螒?下面這篇文章主要給大家介紹了關于如何使用原生JS快速寫出一個五子棋小游戲的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
JavaScript 上傳文件(psd,壓縮包等),圖片,視頻的實現(xiàn)方法
本文通過實例代碼給大家介紹了JavaScript 上傳文件(psd,壓縮包等),圖片,視頻功能,需要的朋友可以參考下
2017-06-06
CSS3+JavaScript實現(xiàn)翻頁幻燈片效果
這篇文章主要介紹了CSS3+JavaScript實現(xiàn)翻頁幻燈片效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-06-06
JS實現(xiàn)圖片居中懸浮效果
這篇文章給大家分享的是通過JS實現(xiàn)圖片垂直居中懸浮，不跟隨滾動條飄動的效果，有興趣的朋友跟著學習下吧。
2017-12-12
關于封裝axios網(wǎng)絡請求降低代碼耦合度詳解
在項目中直接使用Axios或其他第三方庫來發(fā)送網(wǎng)絡請求獲取數(shù)據(jù)時,會導致代碼與網(wǎng)絡請求的邏輯耦合度過高,導致難以維護,所以本文將講解如何將網(wǎng)路請求的代碼進行封裝來進行解耦操作,文中通過代碼示例和圖文講解的非常詳細,需要的朋友可以參考下
2024-05-05
為什么說JavaScript預解釋是一種毫無節(jié)操的機制詳析
這篇文章主要給大家介紹了關于為什么說JavaScript預解釋是一種毫無節(jié)操的機制的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧
2018-11-11
javascript中使用class和prototype的區(qū)別小結
本文將介紹在JavaScript何時使用class以及何時使用prototype,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-08-08
js實現(xiàn)class樣式的修改、添加及刪除的方法
這篇文章主要介紹了js實現(xiàn)class樣式的修改、添加及刪除的方法,主要通過修改標簽的className來實現(xiàn)這一功能,非常具有實用價值,需要的朋友可以參考下
2015-01-01
JavaScript變量聲明的var、let、const詳解
JavaScript中的變量是松散類型的,可以保存任何類型數(shù)據(jù),變量只不過是一個名稱,下面這篇文章主要給大家介紹了關于JavaScript變量聲明的var、let、const的相關資料,需要的朋友可以參考下
2022-07-07
webpack-mvc 傳統(tǒng)多頁面組件化開發(fā)詳解
這篇文章主要介紹了webpack-mvc 傳統(tǒng)多頁面組件化開發(fā)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05