JQuery統(tǒng)計input和textarea文字輸入數(shù)量(代碼分享)
本文主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(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ù)*/ /*在頁面剛載入時先顯示出輸入框的字?jǐn)?shù)*/ var text1=$("#detail1").val(); var counter1=text1.length; $("#detail1_num").text(counter1); /*添加觸發(fā)事件進(jìn)行動態(tài)計算輸入框的字?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); }); });
效果圖如下:
由于博主主要做移動端開發(fā),剛開始在移動端測試時由于輸入文字是會出現(xiàn)輸入框,在輸入框中輸入的文字在計算時會出現(xiàn)錯誤,所以又添加了一個input事件,這個事件會在輸入框內(nèi)邊輸入邊進(jìn)行計算(主要是拼音輸完以后確認(rèn)漢字部分)。
希望對大家有幫助。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- input 和 textarea 輸入框最大文字限制的jquery插件
- jQuery實現(xiàn)表單input中提示文字value隨鼠標(biāo)焦點移進(jìn)移出而顯示或隱藏的代碼
- jQuery實現(xiàn)限制textarea文本框輸入字符數(shù)量的方法
- jQuery檢測輸入的字符串包含的中英文的數(shù)量
- jQuery實現(xiàn)統(tǒng)計復(fù)選框選中數(shù)量
- jquery實現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
- jQuery計算textarea中文字?jǐn)?shù)(剩余個數(shù))的小程序
- 基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識別)
- JQuery 表單中textarea字?jǐn)?shù)限制實現(xiàn)代碼
- 基于jquery的inputlimiter 實現(xiàn)字?jǐn)?shù)限制功能
相關(guān)文章
jQuery UI Datepicker length為空或不是對象錯誤的解決方法
jQuery UI Datepicker length為空或不是對象錯誤的解決方法,需要的朋友可以參考下。2010-12-12jQuery 標(biāo)題的自動翻轉(zhuǎn)實現(xiàn)代碼
我們平時在開發(fā)web程序的時候,想把一個新聞源滾動顯示新聞的條目的標(biāo)題及內(nèi)容摘要,而且是每次一條,有點類似csdn的滾動廣告。2009-10-10