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

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

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

看下面的代碼：

/600

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屬性

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

}

cols="45"

rows="3"

wrap="virtual"

οnkeypress="return(this.value.length<20)"

οnkeydοwn="textlen(this,20)"

οnkeyup="textlen(this,20)"

οnblur="maxtext(this,20)">

總結

以上是生活随笔為你收集整理的html中text的maxlength,详解maxlength属性在textarea里奇怪的表现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。