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

