JQuery統(tǒng)計(jì)input和textarea文字輸入數(shù)量(代碼分享)
本文主要介紹了jQuery實(shí)現(xiàn)統(tǒng)計(jì)輸入文字個(gè)數(shù)的方法,需要的朋友可以參考下。
HTML部分:
<input type="text" value="我是輸入的文字" maxlength="10" id="detail1"/> <p><span id="detail1_num">0</span>/<span>10</span></p> <textarea placeholder="最多輸入100字" rows="3" maxlength="100" class="editDetail" id="detail2" >呵呵</textarea> <p><span id="detail2_num">0</span>/<span>100</span></p>
JS部分:
$(function(){ /*input字?jǐn)?shù)*/ /*在頁面剛載入時(shí)先顯示出輸入框的字?jǐn)?shù)*/ var text1=$("#detail1").val(); var counter1=text1.length; $("#detail1_num").text(counter1); /*添加觸發(fā)事件進(jìn)行動(dòng)態(tài)計(jì)算輸入框的字?jǐn)?shù)*/ $("#detail1").on('blur keyup input',function(){ var text=$("#detail1").val(); var counter=text.length; $("#detail1_num").text(counter); }); /* textarea字?jǐn)?shù)*/ var text2=$("#detail2").val(); var counter2=text2.length; $("#detail2_num").text(counter2); $("#detail2").on('blur keyup input',function(){ var text=$("#detail2").val(); var counter=text.length; $("#detail2_num").text(counter); }); });
效果圖如下:
由于博主主要做移動(dòng)端開發(fā),剛開始在移動(dòng)端測(cè)試時(shí)由于輸入文字是會(huì)出現(xiàn)輸入框,在輸入框中輸入的文字在計(jì)算時(shí)會(huì)出現(xiàn)錯(cuò)誤,所以又添加了一個(gè)input事件,這個(gè)事件會(huì)在輸入框內(nèi)邊輸入邊進(jìn)行計(jì)算(主要是拼音輸完以后確認(rèn)漢字部分)。
希望對(duì)大家有幫助。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
- input 輸入框獲得/失去焦點(diǎn)時(shí)隱藏/顯示文字(jquery版)
- input 和 textarea 輸入框最大文字限制的jquery插件
- jQuery實(shí)現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點(diǎn)移進(jìn)移出而顯示或隱藏的代碼
- jQuery實(shí)現(xiàn)限制textarea文本框輸入字符數(shù)量的方法
- jQuery檢測(cè)輸入的字符串包含的中英文的數(shù)量
- jQuery實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中數(shù)量
- jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
- jQuery計(jì)算textarea中文字?jǐn)?shù)(剩余個(gè)數(shù))的小程序
- 基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別)
- JQuery 表單中textarea字?jǐn)?shù)限制實(shí)現(xiàn)代碼
- 基于jquery的inputlimiter 實(shí)現(xiàn)字?jǐn)?shù)限制功能
相關(guān)文章
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法
jQuery UI Datepicker length為空或不是對(duì)象錯(cuò)誤的解決方法,需要的朋友可以參考下。2010-12-12jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)的左右移動(dòng)焦點(diǎn)圖效果,涉及jQuery結(jié)合時(shí)間函數(shù)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10jQuery 標(biāo)題的自動(dòng)翻轉(zhuǎn)實(shí)現(xiàn)代碼
我們平時(shí)在開發(fā)web程序的時(shí)候,想把一個(gè)新聞源滾動(dòng)顯示新聞的條目的標(biāo)題及內(nèi)容摘要,而且是每次一條,有點(diǎn)類似csdn的滾動(dòng)廣告。2009-10-10