这篇文章主要介绍了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>
|