textarea输入框在移动端换行符不计算长度问题，即时检测输入框的字数

应用场景：微信端textarea标签的使用，下图：第二张图片在换行后长度为149，元素属性maxlength="150",但是却输入不了了，

代码：

　　　　　　　$('.textarea_box textarea').on("keyup",function(e){
                $(this).autosize();
                $('.textarea_box span').text( $(this).val().length +'/150' );
            });

问题分析：

查找资料知道用换行符换行后在长度属性length中是不把换行符计算在内的，而maxlength属性却把换行符算进去了，所以导致了此类问题，

经过此问题的修改，发现空格字符在length中占了6的长度，那么空格&nbsp；也是占了6个字符，这里面会不会有联系呢，而且value值也是空格显示的，此处疑问有待解惑。

最终解决代码：

$('.textarea_box textarea').on("keyup",function(e){
                $(this).autosize();
                // 取出回车字符
                var textareaVal = (($(this).val().replace(/<(.+?)>/gi,"&lt;$1&gt;")).replace(/ /gi,"&nbsp;")).replace(/\n/gi,"|");
                // 回车数量
                var entLen = textareaVal.split('|').length-1;
                // 不包含回车的数量
                var strLen = textareaVal.split('|').join('').length;
                $(this).attr('maxlength',150+(entLen*2));
                var nbspStr = textareaVal.replace(/ /gi,"&nbsp;");
                // 空格数量
                var nbspLen = 0;
                nbspLen = nbspStr.split('&nbsp;').length-1;
                len = (strLen + nbspLen) - (nbspLen*6);
                // 以下代码是把回车符计算在内
//                var entLen = textareaVal.split('|').length-1;
//                console.log(entLen);
//                $(this).attr('maxlength',30+entLen);
//                var nbspStr = textareaVal.replace(/ /gi,"&nbsp;");
//                // 空格数量
//                var nbspLen = 0;
//                nbspLen = nbspStr.split('&nbsp;').length-1;
//                len = (textareaVal.length + nbspLen) - (nbspLen*6);
                
                $('.textarea_box span').text( len +'/30' );
            });

var textareaVal = (($(this).val().replace(/<(.+?)>/gi,"&lt;$1&gt;")).replace(/ /gi,"&nbsp;")).replace(/\n/gi,"|");此段代码网络上找的还没明白原理

代码中还有个问题点就是：回车符是占用了一个长度位的，但是需entLen*2才能解决问题，，，回车符换成|后若输入|也会产生问题，

由于时间问题就不一一列出了，

补充：

后来自己又写了个demo，其实空格还是占一个字符位的，处理回车数量的方法

replace(/ /gi," ")

影响了空格的length；空格已经被&nbsp；替换了，

由于输入法的不同会导致输入后字数虽然没有输入但是len还是会增加，修改代码：

                var len = 0;    
                $('.textarea_box textarea').on("keyup",function(e){
                    if( len >= 30 && e.keyCode != 8 ){
                        return;
                    }else{
                        // 取出回车字符
                        var textareaVal = (($(this).val().replace(/<(.+?)>/gi,"&lt;$1&gt;")).replace(/ /gi,"&nbsp;")).replace(/\n/gi,"|");
                        // 回车数量
                        var entLen = textareaVal.split('|').length-1;
                        // 不包含回车的数量
                        var strLen = textareaVal.split('|').join('').length;
                        $(this).attr('maxlength',30+(entLen*2));
                        var nbspStr = textareaVal.replace(/ /gi,"&nbsp;");
                        // 空格数量
                        var nbspLen = 0;
                        nbspLen = nbspStr.split('&nbsp;').length-1;
                        len = (strLen + nbspLen) - (nbspLen*6);
                        $('.textarea_box span').text( len +'/30' );
                    }
                });

 补充：上面代码还是会产生问题，就是文本的复制粘贴，输入法不一样时也会产生问题，

通过查找资料，了解到input的即时搜索功能。可以通过监听propertychange事件来实现。

propertychange和input事件

input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化。propertychange，只要当前对象属性发生改变。

如此代码改为：

　　　　　　var len = 0;    
            $('.textarea_box textarea').on("input propertychange",function(e){
                if( len >= 150 && e.keyCode == 8 ){
                    return;
                }else{
                    // 取出回车字符
                    var textareaVal = ($(this).val().replace(/<(.+?)>/gi,"&lt;$1&gt;")).replace(/\n/gi,"|");
                    // 回车数量
                    var entLen = textareaVal.split('|').length-1;
                    // 不包含回车的数量
                    var strLen = textareaVal.split('|').join('').length;
                    $(this).attr('maxlength',150+(entLen*2));
                    len = strLen;
                    if( len >= 150 ){
                        len = 150;
                    };
                    $('.textarea_box span').text( len +'/150' );
                }
            });

 

 

 

 

转载于:https://www.cnblogs.com/lchuang/p/6593334.html