<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，因?yàn)閗eydown只能監(jiān)聽用戶鍵盤輸入，對(duì)于粘貼沒有反應(yīng)。。。oninput可以做到。

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

臥槽，無法輸入了！??！再刪的多一些，這時(shí)可以繼續(xù)輸入，但是?。?！在輸入還不到600字符的時(shí)候，突然又不能輸入了?。?！

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

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

修改下代碼，去掉textarea的maxlength屬性，使用input監(jiān)聽textarea的value值，超過600就自動(dòng)截?cái)啵斐梢环N無法輸入的錯(cuò)覺。

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字符后阻止默認(rèn)事件，但是有幾個(gè)鍵是不能禁止的：刪除退格和回車：

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，但是他們有一個(gè)更強(qiáng)大的方法：onpropertychange。

下面通過一端代碼講解textarea實(shí)現(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>

您可能感興趣的文章: