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>