JavaScript監控輸入框字數變化，超出則禁止輸入
不廢話，給你看看效果：
1.無輸入狀態：
2.輸入三個字符：
3.超出5個后報錯：
現在粘出代碼，首先是html代碼：
<body> <div class="weui-cells__title" style="font: '微軟雅黑';font-size: 17px;color: black;" align="center">大文本框：</div> <div class="weui-cell"> <textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此處輸入內容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea> <div class='weui-textarea-counter'><span id="count"></span>/5</div> </div> </body>
上述html代碼中，關鍵在於OnInput方法和OnPropChanged方法，方法內參數event為主要監聽參數，2000為字數限制，"count"為下面那個字數統計的id，傳入這三個參數可以使方法被多個頁面調用，實現代碼復用，減少冗余代碼。
現在貼出js部分代碼，我是寫在一個單獨的js文件里面的，此處放在同一頁面：
1 <!-- body 最后 --> 2 <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> 3 <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script> 4 <script> 5 $("#count").html("0");//初始化字數計數器 6 7 /* 此方法兼容大部分瀏覽器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 8 監聽輸入框字數變化*/ 9 function OnInput(event, length, id) { 10 11 if(event.srcElement.value.length <= length) { 12 $("#" + id).html(event.srcElement.value.length); 13 } else { 14 $.toptip("內容過長，最多" + length + "字", 'warning'); 15 /*獲取輸入框id值*/ 16 var id2 = event.srcElement.id; 17 /*超出規定長度后禁止繼續輸入*/ 18 var value = event.srcElement.value.substring(0, length); 19 $("#" + id2).val(value); 20 } 21 22 } 23 // 此方法僅適用於IE瀏覽器 24 function OnPropChanged(event, length, id) { 25 26 if(event.srcElement.value.length <= length) { 27 $("#" + id).html(event.srcElement.value.length); 28 } else { 29 $.toptip("內容過長，最多" + length + "字", 'warning'); 30 /*獲取輸入框id值*/ 31 var id2 = event.srcElement.id; 32 /*超出規定長度后禁止繼續輸入*/ 33 var value = event.srcElement.value.substring(0, length); 34 $("#" + id2).val(value); 35 } 36 37 } 38 </script>
現在放出完整頁面代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>監聽輸入框字數變化</title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> 7 <!-- head 中 --> 8 <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css"> 9 <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css"> 10 </head> 11 12 <body> 13 <div class="weui-cells__title" style="font: '微軟雅黑';font-size: 17px;color: black;" align="center">大文本框：</div> 14 <div class="weui-cell"> 15 <textarea class="weui-textarea" id="ActivityParticipationProcess" placeholder="在此處輸入內容" rows="5" oninput="OnInput (event,5,'count')" onpropertychange="OnPropChanged (event,5,'count')"></textarea> 16 <div class='weui-textarea-counter'><span id="count"></span>/5</div> 17 </div> 18 </body> 19 <!-- body 最后 --> 20 <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> 21 <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script> 22 <script> 23 $("#count").html("0");//初始化字數計數器 24 25 /* 此方法兼容大部分瀏覽器，如：Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9 26 監聽輸入框字數變化*/ 27 function OnInput(event, length, id) { 28 29 if(event.srcElement.value.length <= length) { 30 $("#" + id).html(event.srcElement.value.length); 31 } else { 32 $.toptip("內容過長，最多" + length + "字", 'warning'); 33 /*獲取輸入框id值*/ 34 var id2 = event.srcElement.id; 35 /*超出規定長度后禁止繼續輸入*/ 36 var value = event.srcElement.value.substring(0, length); 37 $("#" + id2).val(value); 38 } 39 40 } 41 // 此方法僅適用於IE瀏覽器 42 function OnPropChanged(event, length, id) { 43 44 if(event.srcElement.value.length <= length) { 45 $("#" + id).html(event.srcElement.value.length); 46 } else { 47 $.toptip("內容過長，最多" + length + "字", 'warning'); 48 /*獲取輸入框id值*/ 49 var id2 = event.srcElement.id; 50 /*超出規定長度后禁止繼續輸入*/ 51 var value = event.srcElement.value.substring(0, length); 52 $("#" + id2).val(value); 53 } 54 55 } 56 </script> 57 58 </html>
第一次寫，寫的不好或者排版不好看請見諒，有疑問或者建議意見都歡迎留言或者來信：CodeKjm@163.com