JavaScript中統(tǒng)計Textarea字數(shù)并提示還能輸入的字符
現(xiàn)在流行的Twitter等微博客網(wǎng)站,有一個很好的用戶體驗,就是在文本框中輸入文字的時候,會自動統(tǒng)計輸入的字符,并顯示用戶還能輸入的字符,在限制了140個字的微博客中,這樣的小提示可以很好的增強用戶體驗。
如果實現(xiàn)這種技術(shù)呢,我進行了一些研究,發(fā)現(xiàn)實現(xiàn)其實挺簡單,幾行代碼就能完成輸入字符統(tǒng)計功能,經(jīng)過實際測試,其對文字的統(tǒng)計與Twitter等微博客的完全相同。
使用方法是,先增加一個span,用于顯示剩余的字數(shù),然后在Textarea中,加入一個onkeydown和onkeyup的事件,調(diào)用另一段JavaScript函數(shù),函數(shù)調(diào)用的參數(shù)為span的id和textarea的id,然后再JavaScript中使用innerHTML返回計算出來的剩余字數(shù)。
核心Javascript代碼:
<span style="font-size:18px;"><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></span>
PS:本站還提供了一個關(guān)于字數(shù)統(tǒng)計的在線工具,感興趣的朋友可以參考一下:
在線字數(shù)統(tǒng)計工具:
http://tools.jb51.net/code/zishutongji
- 把textarea中字符串里含有的回車換行替換成<br>的javascript代碼
- JS控制文本框textarea輸入字數(shù)限制的方法
- javascript textarea字數(shù)限制
- javascript textarea光標定位方法(兼容IE和FF)
- TextArea設(shè)置MaxLength屬性最大輸入值的js代碼
- JavaScript判斷textarea值是否為空并給出相應(yīng)提示
- 在textarea中顯示html頁面的javascript代碼
- JavaScript 獲取/設(shè)置光標位置,兼容Input&&TextArea
- 用JavaScript限制textarea輸入長度 (For: IE、Firefox ...)[
- 關(guān)于js對textarea換行符的處理方法淺析
相關(guān)文章
uniapp中uni.request(OBJECT)接口請求封裝實例代碼
在開發(fā)的時候經(jīng)常會用到前端請求后端接口,每次的請求都會出現(xiàn)地址不一樣,參數(shù)不一樣,方式不一樣等等情況,下面這篇文章主要給大家介紹了關(guān)于uniapp中uni.request(OBJECT)接口請求封裝的相關(guān)資料,需要的朋友可以參考下2022-12-12
JavaScript實現(xiàn)數(shù)字數(shù)組按照倒序排列的方法
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)字數(shù)組按照倒序排列的方法,涉及javascript中sort方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
js經(jīng)驗分享 JavaScript反調(diào)試技巧
在這篇文章中,我打算跟大家總結(jié)一下關(guān)于JavaScript反調(diào)試技巧方面的內(nèi)容。值得一提的是,其中有些方法已經(jīng)被網(wǎng)絡(luò)犯罪分子廣泛應(yīng)用到惡意軟件之中了,需要的朋友可以參考下2018-03-03
JavaScript設(shè)計模型Iterator實例解析
這篇文章主要介紹了JavaScript設(shè)計模型Iterator實例解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
JavaScript設(shè)計模式之構(gòu)造函數(shù)模式實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之構(gòu)造函數(shù)模式,結(jié)合實例形式分析了構(gòu)造函數(shù)模式的概念、功能、定義及使用方法,需要的朋友可以參考下2018-07-07
javascript 簡單高效判斷數(shù)據(jù)類型 系列函數(shù) By shawl.qiu
javascript 簡單高效判斷數(shù)據(jù)類型 系列函數(shù) By shawl.qiu...2007-03-03

