現在流行的Twitter等微博客網站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗。
字數統計功能，原理是給textarea添加onKeyup事件，事件讀取textarea內容并獲得長度，并賦值給統計字數的那個文本節點，這里有一點要注意的是添加onKeypress和onKeydown事件也能實現效果，但都有些不足，會在某些情況下造成誤解，我都試了下，感覺只用一個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>字數：<span id="num">0</span></div>
- </div>
- </body>
- </html>
以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
圖片精選
