HTML5給表單帶來了很多改變，比如今天要說的maxlength，這個(gè)屬性可以限制輸入框輸入的最大字字符數(shù)，更方便的是對(duì)于粘貼的內(nèi)容也能夠根據(jù)字符數(shù)自動(dòng)截?cái)唷?/p>

最近就接到這要一個(gè)需求，限制用戶最多輸入600字(漢字和字母不區(qū)分)，對(duì)于粘貼的內(nèi)容也要能自動(dòng)截?cái)?#xff0c;輸入600字后就無法輸入。

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

看下面的代碼：

/600

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)?#xff0c;此時(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)?#xff0c;造成一種無法輸入的錯(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屬性

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。