maxlength屬性在textarea裏奇怪的表現

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。

 

沒有想通究竟是形成這種怪異現象，若是有知道，求告知。。。

週末改bug傷不起。。。。