JS实时计算textarea输入文字长度

使用场景

• 使用textarea，然后限制输入的长度，实时在textarea末尾显示剩余可输入的字节数

判断点：

• 监听键盘按下事件

• 剔除换行符占位数

• 更新剩余个数显示

解决办法

• JS事件

  function wordStatic(input) { 
    // 获取要显示已经输入字数文本框对象 
    var content = document.getElementById('num'); 
    if (content && input) { 
        // 获取输入框输入内容长度并更新到界面 
        var value = input.value; 
        // 将换行符不计算为单词数 
        value = value.replace(/\n|\r/gi,""); 
        // 更新计数 
        content .innerText = value.length; 
    } 
  } 
  

• VUE写法

  <textarea class="remark" placeholder="请填写您要说的内容" cols="30" rows="10" @keyup="wordStatic($event)" v-model="postdata.returnVisit"></textarea>
  <div class="shownum"><span>{{count?count:'0'}}</span>/200</div>
  
  wordStatic(e){
   if (e) {
            const value = e.target.value;
            if (value.replace(/[\r\n]/g, "").length > 200) {
                this.remarktxt = value.substring(0, 200);
                return;
            } else {
                this.count = value.replace(/[\r\n]/g, "").length;
            }
        }
    }
  

• HTML

   <textarea onkeyup="wordStatic(this);" maxlength="120" rows="3"></textarea> 
   <div><span id="num">0</span>/120</div>