現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個(gè)很好的用戶體驗(yàn)，就是在文本框中輸入文字的時(shí)候，會(huì)自動(dòng)統(tǒng)計(jì)輸入的字符，并顯示用戶還能輸入的字符，在限制了140個(gè)字的微博客中，這樣的小提示可以很好的增強(qiáng)用戶體驗(yàn)。
字?jǐn)?shù)統(tǒng)計(jì)功能，原理是給textarea添加onKeyup事件，事件讀取textarea內(nèi)容并獲得長(zhǎng)度，并賦值給統(tǒng)計(jì)字?jǐn)?shù)的那個(gè)文本節(jié)點(diǎn)，這里有一點(diǎn)要注意的是添加onKeypress和onKeydown事件也能實(shí)現(xiàn)效果，但都有些不足，會(huì)在某些情況下造成誤解，我都試了下，感覺只用一個(gè)onKeyup事件是最明智的選擇。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>測(cè)試文件</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>字?jǐn)?shù)：<span id="num">0</span></div>
- </div>
- </body>
- </html>
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
