(function($){
? $.fn.limitTextarea = function(opts){
?? ?? var defaults = {
??????? maxNumber:140,//允許輸入的最大字數
?? ??? ?position:'top',//提示文字的位置，top：文本框上方，bottom：文本框下方
?? ??? ?onOk:function(){},//輸入后，字數未超出時調用的函數
?? ??? ?onOver:function(){}//輸入后，字數超出時調用的函數? ?
?? ?? }
?? ?? var option = $.extend(defaults,opts);
?? ?? this.each(function(){
?? ??? ?? var _this = $(this);
?? ??? ?? var info = '<div id="tip">您可以輸入<b>' + (option.maxNumber - _this.val().length + 7) + '</b>個字</div>';
?? ??? ?? var fn = function(){
?? ??? ??? ?var extraNumber = option.maxNumber - _this.val().length;
?? ??? ??? ?var $info = $('#tip');
?? ??? ??? ?if(extraNumber>=0){
?? ??? ??? ?? $info.html('還可以輸入<b>'+extraNumber+'</b>個字');?? ?
?? ??? ??? ?? option.onOk();
?? ??? ??? ?}
?? ??? ??? ?else{
?? ??? ??? ?? $info.html('已經超出<b style="color:red;">'+(-extraNumber)+'</b>個字');
?? ??? ??? ?? option.onOver();
?? ??? ??? ?} ?
?? ??? ?? };
?? ??? ?? switch(option.position){
?? ??? ??? ?? case 'top' :
?? ??? ??? ???? _this.before(info);
?? ??? ??? ?? break;
?? ??? ??? ?? case 'bottom' :
?? ??? ??? ?? default :
?? ??? ??? ???? _this.after(info);
?? ??? ?? }
?? ??? ?? //綁定輸入事件監聽器
?? ??? ?? if(window.addEventListener) { //先執行W3C
?? ??? ??? ?_this.get(0).addEventListener("input", fn, false);
?? ??? ?? } else {
?? ??? ??? ?_this.get(0).attachEvent("onpropertychange", fn);
?? ??? ?? }
?? ??? ?? if(window.VBArray && window.addEventListener) { //IE9
?? ??? ??? ?_this.get(0).attachEvent("onkeydown", function() {
?? ??? ??? ?? var key = window.event.keyCode;
?? ??? ??? ?? (key == 8 || key == 46) && fn();//處理回退與刪除
?? ??? ??? ?});
?? ??? ??? ?_this.get(0).attachEvent("oncut", fn);//處理粘貼
?? ??? ?? }?? ??? ? ?
?? ?? });? ?
? }?? ?
})(jQuery)

?

調用函數：
??????????????? $("#replyTxta").limitTxta({
??????????????????? maxNumber: 70,?? //最大字數
??????????????????? position: 'bottom',?? //提示文字的位置，top：文本框上方，bottom：文本框下方
??????????????????? onOk: function () {
??????????????????????? $('#replyTxta').css('background-color', 'white');?? //輸入后，字數未超出時調用的函數
??????????????????????? $('#sendBtn').attr('disabled', false);
??????????????????? },
??????????????????? onOver: function () {
??????????????????????? $('#replyTxta').css('background-color', 'lightpink');?? //輸入后，字數超出時調用的函數，這里把文本區域的背景變為粉紅色
??????????????????????? $('#sendBtn').attr('disabled', true);
??????????????????? }
??????????????? });

轉載于:https://www.cnblogs.com/whlhaikuotiankong/p/3401221.html

總結

以上是生活随笔為你收集整理的文本域字数限制统计（不区分中英文 符号）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。