詳解maxlength屬性在textarea裡奇怪的表現_javascript技巧

HTML5為表單帶來了很多改變，例如今天要說的maxlength，這個屬性可以限制輸入框輸入的最大字字元數，更方便的是對於貼上的內容也能夠根據字元數自動截斷。

最近就接到這要一個需求，限制用戶最多輸入600字（漢字和字母不區分），對於貼上的內容也要能自動截斷，輸入600字後就無法輸入。

第一時間想到了maxlength，基本上滿足需求，但還是有一些怪異的表現。

看下面的程式碼：

<textarea name="text" id="text" maxlength="600"></textarea>
<p><span id="already"></span>/<span>600</span></p>
text.oninput = function() {
  already.textContent = text.value.length;
}

上述程式碼中限制輸入字元數為600，並透過oninput監聽使用者的輸入，沒有用keydown，因為keydown只能監聽使用者鍵盤輸入，對於貼上沒有反應。 。 。 oninput可以做到。

這時候直接輸入600字後就不再可以輸入，刪除一些，再輸入一些，表現正常。奇怪的是如果你貼進textarea裡一大堆文字，以為maxlength的存在自動截斷，此時textarea裡正好有600個字符，這時候你刪除一些字符，然後再嘗試輸入，你會發現：

臥槽，無法輸入了！ ！ ！再刪的多一些，這時可以繼續輸入，但是！ ！ ！輸入還不到600字元的時候，突然又不能輸入了！ ！ ！

chrome下以及我的android機器下都會這樣。 。暫時不知道原因。測試了下input，不會有這樣的情況出現，而且maxlength屬性的值小一點的話就不會有這種情況，比如10。 。 。

這樣的話maxlength就不靠譜了，就自己多寫點程式碼吧，既然oninput這麼靈活，就用它了。

修改下程式碼，去掉textarea的maxlength屬性，使用input監聽textarea的value值，超過600就自動截斷，造成一種無法輸入的錯覺。

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

不放心的話，可以繼續監聽keydown事件，在輸入大於600字元後阻止預設事件，但是有幾個鍵是不能禁止的：刪除退格和回車：

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE8以下不支援maxlength屬性，也不支援oninput，但他們有一個更強大的方法：onpropertychange。

下面透過一端程式碼講解textarea實作maxlength屬性

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form>