詳解maxlength屬性在textarea里奇怪的表現(xiàn)

更新時間：2015年12月27日 10:50:11 作者：zjzhome

這篇文章主要介紹了maxlength屬性在textarea里奇怪的表現(xiàn)的相關資料,需要的朋友可以參考下

HTML5給表單帶來了很多改變，比如今天要說的maxlength，這個屬性可以限制輸入框輸入的最大字字符數(shù)，更方便的是對于粘貼的內(nèi)容也能夠根據(jù)字符數(shù)自動截斷。

最近就接到這要一個需求，限制用戶最多輸入600字（漢字和字母不區(qū)分），對于粘貼的內(nèi)容也要能自動截斷，輸入600字后就無法輸入。

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

看下面的代碼：

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

上述代碼中限制輸入字符數(shù)為600，并通過oninput監(jiān)聽用戶的輸入，沒有用keydown，因為keydown只能監(jiān)聽用戶鍵盤輸入，對于粘貼沒有反應。。。oninput可以做到。

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

臥槽，無法輸入了?。?！再刪的多一些，這時可以繼續(xù)輸入，但是?。。≡谳斎脒€不到600字符的時候，突然又不能輸入了?。。?/p>

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

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

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

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

不放心的話，可以繼續(xù)監(jiān)聽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實現(xiàn)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>

您可能感興趣的文章: