textarea下長度區別字母數字字符、中文字符換行 maxlength兼容

時間 2019-11-16

標籤 textarea 長度區別字母數字字符中文換行 maxlength 兼容简体版

原文原文鏈接

在Vue 上 textarea 根據字母數字中文換行符號顯示剩餘長度

第一次寫博客，主要是想把本身平時開發過程當中遇到的問題記錄下來，作個積累，也給各位前端小夥伴一些知識分享，平時公司工做比較忙，忽略了提高本身，經過博客能夠作知識沉澱，若是對其中有不一樣意見的，歡迎提出
問題出現
公司不少的 h5 和小程序場景都是在 textarea 輸入文字，而後顯示已輸入xxx 個字符這樣的javascript

這時候常規作法在textarea 設置 maxlength = '5000' ,基於vue 的話,那就綁定一個值 textareaVal 在頁面輸出 {{ textareaVal.length/5000 }}html

不過若是這樣就完成，寫這篇博文就沒意義了，好了，廢話很少說

這樣寫的問題有一下幾個：
-- 假設最多輸入40個字符，中文能輸入48個，字母輸入48個，可是字母的佔位只有中文的一半，顯然產品和用戶不會買帳，他們會讓你把字母也要根中文輸入的同樣多，佔位同樣
-- 換行，用戶手動去點換行，會佔一個字符，默認 textareaVal.length 會把換行符號看成一個字符，maxlength 也是前端

要解決這兩個問題，咱們要按這個思路走
中文 2個佔位
字母一個佔位
數字一個佔位
空格一個佔位
換行符不佔位
剩餘還能夠輸入字符 leftLen
已輸入字符長度 textareaLen
最大可輸入長度 maxLen
但是咱們不能去改變 textareaVal 的值了，已輸入長度 textareaLen 要手動計算， maxLen 在輸入字母數字換行空格增長1 ，
到這一步，照這個思路
h5
基於vuevue

<template>
    <div>
        <p>
             還能夠輸入{{ leftLen }} 個字 
        </p>
        <p>
             已輸入{{ textareaLen }} 個字 
        </p>
        <textarea :maxlength="maxLen"
            style='resize: both'
         @input = 'textareaChange($event)' ></textarea>
    </div>    
</template>
<script type="text/javascript">
    import api from '@/api'
    export default {
        data(){
            return {
                maxLen : 40, // textarea 最多可輸數
                leftLen: 40 , // 剩餘可輸入字符數
                textareaLen : 0, // 已輸入字符數    
            }
        },
        methods:{
            textareaChange(e){

                console.log(e)
                console.log( e.target.value )

                setTimeout(()=>{
                  var countData      =  this.computedLen(e.target.value )    
                  console.log(countData)
                  this.maxLen = countData.maxLen 
                  this.leftLen = countData.leftLen 
                  this.textareaLen = countData.textareaLen 
                },200)
                
                
            },
            computedLen(str){
                // 正則
                var repOne = /[0-9a-zA-Z|\s]/  // 字母數字 

                // 若是split 分割後，換行符會 根其餘字符 粘合在一塊兒 例如 ('ab\nc').split('') = ['a','b\n','c']
                var repEnter = /[\&]/  //  & 符號

                console.log(str)
                 // 用& 代替 換行符    
                 str = str.replace(/[\r\n]/g , '&')

                // 初始剩餘可輸入字符數
                var totalLen = 40  
                // 設置maxLen
                var maxLen = 40
                // 對字符串 分割成數組
                var strAttr = str.split('')
                var len = 0
                // 刪除退格 爲空時返回
                if (strAttr.length == 0){
                  return { 
                    len : len ,
                    leftLen : totalLen ,
                    //tmp: tmp ,
                    maxLen: maxLen
                   } 
                }else{
                //     
                  strAttr.forEach(function(val, key){
                      // 字母數字空格
                    if ( repOne.test(val) ) {
                      len+=0.5 // 統計 佔位0.5箇中文
                      maxLen+=0.5 // 最多輸入增長 0.5箇中文
                    }
                    // 換行符  不佔位 len 不增長
                    // 檢測 & 
                    else if (repEnter.test(val) ){

                      maxLen++ // 最多輸入增長 1箇中文
                    }
                    else{
                    // 中文或者語言其餘符號
                      len++ // 佔位 1箇中文
                    }
                  })

                  return {
                    textareaLen: Math.ceil( len ), // 已輸入字符 
                    leftLen: Math.floor(totalLen - len ), // 剩餘可輸入字符 向下取 頁面顯示 剩餘字符 
                    maxLen: Math.ceil( maxLen ) , // 向上取 textarea最大字符 
                  }
                }
            }
        }
    }
</script>

主要的點java

監聽事件用 oninput ，不用onkeyup
區別
oninput：僅僅在input的value值發生改變纔會觸發，鼠標鍵盤複製粘貼都可以觸發，可是js修改其value值則不會觸發。（chrome/safari/ff/opera/IE9+）
onchange：域的內容改變，而且失去焦點時觸發（js改變其內容時不會觸發）。
onkeyup：在鍵盤松開時觸發。(若是用鼠標複製粘貼則不會觸發)chrome

在textarea中，若是想捕獲用戶的鍵盤輸入，用onkeyup檢查事件就能夠了，可是onkeyup並不支持複製和粘貼，所以須要動態監測textarea中值的變化，這就須要onpropertychange（用在IE瀏覽器）和oninput（非IE瀏覽器）結合在一塊兒使用了。
參考於連接描述小程序

改變textareaVal 的值時
用正則去判斷數字字母空格換行符api