textarea稱文本域，又稱文本區，即有滾動條的多行文本輸入控件，在網頁的提交表單中經常用到。與單行文本框text控件不同，它不能通過maxlength屬性來限制字數，為此必須尋求其他方法來加以限制以達到預設的需求。

通常的做法就是使用#腳本語言來實現對textarea文本域的字數輸入限制，簡單而實用。假設我們有一個id為 txta1 的textarea文本區，我們可以通過以下代碼限制它的鍵盤輸入字數為10個字（漢字或其他小角字符）：

＜script language="#" type="text/ecmascript"＞ 
window.onload = function() 
{ 
document.getElementById(
 
‘txta1‘).onkeydown = function() 
{ 
 if(this.value.length >= 10) 
  event.returnValue = false; 
} 
} 
＜/script＞

JavaScript輸入框字數實時統計更新

如上圖所示的輸入框的字體計算在各大網站上是在熟悉不過的了，當然在pc端制作起來也是相當簡單，只要捕捉鍵盤事件對輸入框中的字數進行獲取，再用限制字數減去獲取的字數便可以實時計算出“還可以輸入多少字”。但是在移動端這個方法還像是不可行的，第一，pc端可以使用keyup或者keydown進行事件捕捉，當然移動端也可以使用他們，但是在移動端拼音輸入時就會出現下圖的情況：

當我拼音輸入完畢要選擇我的目標漢字時，鍵盤上方的漢字“我是你大哥”就不屬於鍵盤的一部分了，所以這個時候點擊”我是你大哥“進行選擇是就不會觸發keyup或者keydown事件，那麽下方的“還可以輸入**”字“就會出現錯誤，也就會出現bug。下面我就把pc端的字數計算與移動端的字數計算全都寫出來：

1.pc端方法：

 
$("textarea").on("keyup",function(){
　　var textLength = $("textarea").val().length;
　　var numLength = 500-textLength;
　　$(".takeTip span").text(numLength);
})
 

已上是最常用的一種方法，這種方法在pc端完美運行，很簡單。

2.移動端方法：

setInterval(function(){
　　var textLength = $("textarea").val().length;
　　var numLength = 500-textLength;
　　$(".takeTip span").text(numLength);
},100)

因為移動端方法會出現keyup無法觸發的問題，所以就只能不用與鍵盤相關的事件來進行捕捉，使用setInterval函數來進行實時的監控，在移動端完美運行。

下面是vue版：

watchWordsCount:function(){
    setInterval(function(){
        var textLength = $("textarea").val().length;
        var numLength = 20-textLength;
        if(numLength<=0){
            $(".textarea").val($(".textarea").val().substr(0, 20));
            $(".nowcount").html(‘<span class="red">評論內容超出最大限制</span>‘+(20));

        }else{
            $(".nowcount").text(20-numLength);
        }

    },100)
}

 mounted:function(){
            this.watchWordsCount();
        },

<textarea id="content" class="textarea" placeholder="俺們村提倡言論自由哦" rows="4"></textarea>
        <div class="textarea-count">
            <span class="nowcount">0</span>/20
        </div>

上面的那種方法並不是很好，因為一直開的定時器，下面改造一下：

html不變，用了vue的watch方法;

watch: {
            commentText: function (val) {
                if(val.length>=120){
                    this.commentText = val.substr(0,120);
                    this.nowcount = ‘<span class="red">評論內容超出最大限制</span>120‘;
                }else{
                    this.nowcount = val.length;
                }
            }
        }

JavaScript 實現textarea限制輸入字數， 輸入框字數實時統計更新，輸入框實時字數計算移動端bug解決