JavaScript實現(xiàn)統(tǒng)計文本框Textarea字數(shù)增強用戶體驗
更新時間：2012年12月21日 10:25:06 作者：
現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗,本文也嘗試著實現(xiàn)一下
現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗。
如果實現(xiàn)這種技術呢，我進行了一些研究，發(fā)現(xiàn)實現(xiàn)其實挺簡單，幾行代碼就能完成輸入字符統(tǒng)計功能，經(jīng)過實際測試，其對文字的統(tǒng)計與Twitter等微博客的完全相同。
使用方法是，先增加一個span，用于顯示剩余的字數(shù)，然后在Textarea中，加入一個onkeydown和onkeyup的事件，調用另一段JavaScript函數(shù)，函數(shù)調用的參數(shù)為span的id和textarea的id，然后再JavaScript中使用innerHTML返回計算出來的剩余字數(shù)。
以下是相關的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)計功能，經(jīng)過實際測試，其對文字的統(tǒng)計與Twitter等微博客的完全相同。
使用方法是，先增加一個span，用于顯示剩余的字數(shù)，然后在Textarea中，加入一個onkeydown和onkeyup的事件，調用另一段JavaScript函數(shù)，函數(shù)調用的參數(shù)為span的id和textarea的id，然后再JavaScript中使用innerHTML返回計算出來的剩余字數(shù)。
以下是相關的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>
相關文章
這篇文章主要介紹了新手快速入門微信小程序組件庫 iView Weapp，iView Weapp 提供了與 iView 一致的 UI 和盡可能相同的接口名稱，大幅度降低了學習成本，是一套一套高質量的微信小程序 UI 組件庫,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計算器小程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
NCZ在他的同名博客《Feature detection is not browser detection》中，講述了一直以來前端開發(fā)中的一個熱門技術——檢測用戶的瀏覽器平臺，并詳細地敘說歷史發(fā)展以及各種辦法的優(yōu)缺點。2010-01-01
本篇文章主要介紹了JS中傳遞參數(shù)的幾種不同方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
下面小編就為大家?guī)硪黄狫S獲取字符串實際長度(包含漢字)的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
本篇文章主要介紹了微信小程序中實現(xiàn)手指縮放圖片的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
JavaScript sort數(shù)組排序方法和自我實現(xiàn)排序方法小結
這篇文章主要介紹了JavaScript sort數(shù)組排序方法和自我實現(xiàn)排序方法小結的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
js控制div及相關屬性，對于需要控制頁面內的元素的朋友可以參考下。2009-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)可愛的氣泡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
不得不分享的JavaScript常用方法函數(shù)集（上）
不得不分享的JavaScript常用方法函數(shù)集，幫助大家更好的學習javascript程序設計，有興趣的朋友可以參考一下2015-12-12