JQuery統(tǒng)計input和textarea文字輸入數(shù)量(代碼分享)
更新時間：2016年12月29日 14:28:33 作者：淚水的彼岸
本文主要介紹了jQuery實現(xiàn)統(tǒng)計輸入文字個數(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字數(shù)*/
/*在頁面剛載入時先顯示出輸入框的字數(shù)*/
var text1=$("#detail1").val();
var counter1=text1.length;
$("#detail1_num").text(counter1);
/*添加觸發(fā)事件進行動態(tài)計算輸入框的字數(shù)*/
$("#detail1").on('blur keyup input',function(){
var text=$("#detail1").val();
var counter=text.length;
$("#detail1_num").text(counter);
});
/* textarea字數(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)邊輸入邊進行計算（主要是拼音輸完以后確認漢字部分）。
希望對大家有幫助。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- input 和 textarea 輸入框最大文字限制的jquery插件
- jQuery實現(xiàn)表單input中提示文字value隨鼠標焦點移進移出而顯示或隱藏的代碼
- jQuery實現(xiàn)限制textarea文本框輸入字符數(shù)量的方法
- jQuery檢測輸入的字符串包含的中英文的數(shù)量
- jQuery實現(xiàn)統(tǒng)計復選框選中數(shù)量
- jquery實現(xiàn)textarea輸入框限制字數(shù)的方法
- jQuery計算textarea中文字數(shù)(剩余個數(shù))的小程序
- 基于jquery的textarea發(fā)布框限制文字字數(shù)輸入(添加中文識別)
- JQuery 表單中textarea字數(shù)限制實現(xiàn)代碼
- 基于jquery的inputlimiter 實現(xiàn)字數(shù)限制功能
相關(guān)文章
jQuery UI Datepicker length為空或不是對象錯誤的解決方法
jQuery UI Datepicker length為空或不是對象錯誤的解決方法,需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了jQuery1.9+中刪除了live以后的替代方法 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了jQuery實現(xiàn)的左右移動焦點圖效果,涉及jQuery結(jié)合時間函數(shù)響應鼠標事件動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
在JQUERY官方站點看到了另一個方法.更加簡單,給大家分享出來: 官方給的函數(shù)名為CheckboxGroup;顧名思義就是選取一組CHECKBOX.最新版是在6月18號發(fā)布的:2008-08-08
下面小編就為大家?guī)硪黄猠asy ui datagrid 從編輯框中獲取值的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
沒有厭倦了原來那alert那個風格，總是一個感嘆號。有時使得UE不好，今天我們介紹使用Jquery Alert插件 ，使用它可以用來替換JScript中的alert,confirm,prompt。2010-10-10
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表單驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
當點擊圖片時，圖片會加紅顯示。2009-05-05
基于jquery的動畫效果代碼，挺有意思的，需要的朋友可以參考下2012-07-07
jQuery 標題的自動翻轉(zhuǎn)實現(xiàn)代碼
我們平時在開發(fā)web程序的時候，想把一個新聞源滾動顯示新聞的條目的標題及內(nèi)容摘要，而且是每次一條，有點類似csdn的滾動廣告。2009-10-10