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