JavaScript實現(xiàn)統(tǒng)計文本框Textarea字數增強用戶體驗
更新時間：2012年12月21日 10:25:06 作者：
現(xiàn)在流行的Twitter等微博客網站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗,本文也嘗試著實現(xiàn)一下
現(xiàn)在流行的Twitter等微博客網站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗。
如果實現(xiàn)這種技術呢，我進行了一些研究，發(fā)現(xiàn)實現(xiàn)其實挺簡單，幾行代碼就能完成輸入字符統(tǒng)計功能，經過實際測試，其對文字的統(tǒng)計與Twitter等微博客的完全相同。
使用方法是，先增加一個span，用于顯示剩余的字數，然后在Textarea中，加入一個onkeydown和onkeyup的事件，調用另一段JavaScript函數，函數調用的參數為span的id和textarea的id，然后再JavaScript中使用innerHTML返回計算出來的剩余字數。
以下是相關的JavaScript代碼：
以下為引用的內容：
<script language="javascript">
function countChar(textareaName,spanName)
{
document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;
}
</script>
可以輸入<span id="counter">140</span>字<br/>
<textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter");' onkeyup='countChar("status","counter");'></textarea>
如果實現(xiàn)這種技術呢，我進行了一些研究，發(fā)現(xiàn)實現(xiàn)其實挺簡單，幾行代碼就能完成輸入字符統(tǒng)計功能，經過實際測試，其對文字的統(tǒng)計與Twitter等微博客的完全相同。
使用方法是，先增加一個span，用于顯示剩余的字數，然后在Textarea中，加入一個onkeydown和onkeyup的事件，調用另一段JavaScript函數，函數調用的參數為span的id和textarea的id，然后再JavaScript中使用innerHTML返回計算出來的剩余字數。
以下是相關的JavaScript代碼：
以下為引用的內容：
復制代碼 代碼如下:
<script language="javascript">
function countChar(textareaName,spanName)
{
document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;
}
</script>
可以輸入<span id="counter">140</span>字<br/>
<textarea id="status" name="status" rows="6" cols="40" onkeydown='countChar("status","counter");' onkeyup='countChar("status","counter");'></textarea>
相關文章
本篇文章是對捕獲鍵盤事件(且兼容各瀏覽器)的實現(xiàn)進行了詳細的分析介紹，需要的朋友參考下2013-07-07
加入驗證模式 4,同3,但是當驗證不通過時，立即停止向下檢查。在模式3下，如果發(fā)生錯誤，會把錯誤記錄，并向下檢查，模式4就不向下檢查了2008-08-08
JSON創(chuàng)建鍵值對（key是中文或者數字）方式詳解
這篇文章主要介紹了JSON創(chuàng)建鍵值對（key是中文或者數字）方式詳解,需要的朋友可以參考下2017-08-08
基于JS實現(xiàn)Flappy?Bird游戲的示例代碼
Flappy?Bird是13年紅極一時的小游戲，即摁上鍵控制鳥的位置穿過管道間的縫隙。本文將用JS實現(xiàn)這一經典的游戲，需要的可以參考一下2022-04-04
Javascript array類的一些對象使用方法，方便大家操作數組2009-08-08
主要是提前定義了很多文字，這樣的方法不是很是，如果庫中沒有這個詞，是看不到相關信息的。2009-12-12
JavaScript實現(xiàn)日期加減計算功能代碼實例，因為在js中沒有類似C#中的AddDays方法，所以要想實現(xiàn)日期加減的話，就需要自己寫函數來實現(xiàn)。這里分享給大家，有需要的小伙伴可以參考下2015-05-05
uni-app可以說是目前跨端數最多的框架之一了,這篇文章主要給大家介紹了關于uni-app學習之nvue使用的相關資料,文中介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了Ionic3 UI組件之autocomplete的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了詳解webpack babel的配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01