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' );
                }
            });