textArea用页面加载函数中写限制超过长度的代码

 最近公司要求做一个限制用户输入的字数在规定字数内,并给出友好的提示.

 因为不能给textArea文本域绑定函数,必须在一个日历加载的js中完成这些逻辑,所以我就选择在页面绑定函数中完成这个功能.

 

　　　　　　　　　　　　　　　<textarea class="content" id="txt" maxcodelength="10"></textarea><div class="wenben">剩余<font color=red>10</font>字</div>

 

下面是页面绑定函数中写的逻辑

$(document).bind('propertychange input', function () {
                //验证所有英文数字和英文字符
                var reEnglish = /^[0-9a-zA-Z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]+$/;
                var content = $('#txt').val();
                var limitLen = 10;
                $('#txt').attr("maxlength", limitLen);
                var chinese = 0;
                var other = 0;
                 setTimeout(function() {
                     for (var i = 0; i < content.length; i++) {
                         var inputContent = content.charAt(i);
                         if (reEnglish.test(inputContent)) {
                             limitLen = limitLen - 1;
                             other++;
                         } else {
                             limitLen = limitLen - 3;
                             chinese++;
                         }
                     }
                     if (limitLen >= 0) {
                         $('.wenben font').text(limitLen);
                     } else {
                         alert("超过字数限制!");
                         var finalLen = Math.floor(other + (10 - other)/3);
                         content = content.substring(0, finalLen);
                         var a = 0;
                         var b = 0;
                         for(var j=0;j<content.length;j++){
                             if(reEnglish.test(content[j])) {
                                 a ++;
                            }else {
                                 b ++;
                            }
                         }
                         var editLength = 10-a*1-b*3;
                         $('#txt').attr("maxlength", content.length+editLength);
                         $('#txt').val(content);
                         $('.wenben font').text(editLength);
                     }
                 },0);
            });

 

转载于:https://www.cnblogs.com/learnjfm/p/8033605.html