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