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)文章
從JavaScript 1.1開始，它就有了一個(gè)內(nèi)置對(duì)象叫Prototype。通過(guò)它，可以擴(kuò)展JavaScript，在對(duì)象上編寫自定義的屬性和方法。2009-01-01
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)視頻彈幕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
本文介紹的這個(gè)javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年，默認(rèn)顯示當(dāng)前年份，大家可以學(xué)習(xí)下2014-05-05
JS彈出對(duì)話框?qū)崿F(xiàn)方法(三種方式)
這篇文章主要介紹了JS彈出對(duì)話框?qū)崿F(xiàn)方法,結(jié)合實(shí)例形式分析了三種方式,包括alert、confirm及prompt,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-12-12
關(guān)于JavaScript中URL對(duì)象的一些妙用
avaScript URL() 構(gòu)造函數(shù)返回一個(gè)新創(chuàng)建的 URL 對(duì)象,表示由一組參數(shù)定義的 URL,利用該構(gòu)造函數(shù)可以獲取 RL的查詢、參數(shù)等,下面這篇文章主要給大家介紹了關(guān)于JavaScript URL對(duì)象的一些妙用,需要的朋友可以參考下2021-10-10
Javascript的表單與驗(yàn)證-非空驗(yàn)證
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。本文給大家介紹javascript的表單與驗(yàn)證-非空驗(yàn)證，對(duì)javascript表單驗(yàn)證相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03
bootstrap3 兼容IE8瀏覽器！IE8瀏覽器并不支持這一優(yōu)秀的Css3特性，Bootstrap在開發(fā)文檔中寫了如何使用進(jìn)行兼容IE8，感興趣的朋友可以參考一下2016-05-05
uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存實(shí)例詳解
這篇文章主要介紹了uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
使用D3.js構(gòu)建實(shí)時(shí)圖形的示例代碼
這篇文章主要介紹了使用D3.js構(gòu)建實(shí)時(shí)圖形的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js實(shí)現(xiàn)人民幣大寫金額形式轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)人民幣大寫金額形式轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2016-04-04