這篇文章主要介紹了maxlength屬性在textarea裏奇怪的表現的相關資料,須要的朋友能夠參考下javascript
HTML5給表單帶來了不少改變，好比今天要說的maxlength，這個屬性能夠限制輸入框輸入的最大字字符數，更方便的是對於粘貼的內容也可以根據字符數自動截斷。java
最近就接到這要一個需求，限制用戶最多輸入600字（漢字和字母不區分），對於粘貼的內容也要能自動截斷，輸入600字後就沒法輸入。android
第一時間想到了maxlength，基本知足需求，但仍是有一些怪異的表現。chrome
看下面的代碼：測試
|
1
2
3
4
5
|
<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能夠作到。this
這時候直接輸入600字後就再也不能夠輸入，刪除一些，再輸入一些，表現正常。奇怪的是若是你粘貼進textarea裏一大堆文字，覺得maxlength的存在自動截斷，此時textarea里正好有600個字符，這時候你刪除一些字符，而後再嘗試輸入，你會發現：spa
臥槽，沒法輸入了！！！再刪的多一些，這時能夠繼續輸入，可是！！！在輸入還不到600字符的時候，忽然又不能輸入了！！！.net
chrome下以及個人android機器下都會這樣。。暫時不知道緣由。測試了下input，不會有這樣的狀況出現，並且maxlength屬性的值小一點的話就不會有這種狀況，好比10。。。code
這樣的話maxlength就不靠譜了，就本身多寫點代碼吧，既然oninput這麼靈活，就用它了。orm
修改下代碼，去掉textarea的maxlength屬性，使用input監聽textarea的value值，超過600就自動截斷，形成一種沒法輸入的錯覺。
|
1
2
3
4
5
6
|
text.oninput =
function
() {
if
(text.value.length >= 600) {
text.value = text.value.substr(0,600);
}
already.textContent = text.value.length;
}
|
不放心的話，能夠繼續監聽keydown事件，在輸入大於600字符後阻止默認事件，可是有幾個鍵是不能禁止的：刪除退格和回車：
|
1
2
3
4
5
6
7
8
|
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屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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>
|