HTML5給表單帶來了很多改變，比如今天要說的maxlength，這個屬性可以限制輸入框輸入的最大字字符數(shù)，更方便的是對于粘貼的內容也能夠根據(jù)字符數(shù)自動截斷。
最近就接到這要一個需求，限制用戶最多輸入600字（漢字和字母不區(qū)分），對于粘貼的內容也要能自動截斷，輸入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字符的時候，突然又不能輸入了！！！
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> 新聞熱點
疑難解答
