JQuery为textarea添加maxlength
textarea默认不支持maxlength属性。
通过JQuery的keyup事件:
代码
1 <html>
2 <head>
3 <title>JQuery为textarea添加maxlength</title>
4 <script type="text/javascript" src="jquery-1.4.js"></script>
5 </head>
6 <body>
7 <textarea style="width:300px; height:60px;" maxlength="10"></textarea>
8 </body>
9 </html>
10 <script type="text/javascript">
11 $(function(){
12 $("textarea[maxlength]").keyup(function(){
13 var area=$(this);
14 var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
15 if(max>0){
16 if(area.val().length>max){ //textarea的文本长度大于maxlength
17 area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
18 }
19 }
20 });
21 });
22
23 </script>
24
25
2 <head>
3 <title>JQuery为textarea添加maxlength</title>
4 <script type="text/javascript" src="jquery-1.4.js"></script>
5 </head>
6 <body>
7 <textarea style="width:300px; height:60px;" maxlength="10"></textarea>
8 </body>
9 </html>
10 <script type="text/javascript">
11 $(function(){
12 $("textarea[maxlength]").keyup(function(){
13 var area=$(this);
14 var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
15 if(max>0){
16 if(area.val().length>max){ //textarea的文本长度大于maxlength
17 area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
18 }
19 }
20 });
21 });
22
23 </script>
24
25
如果只用keyup只能判断键盘输入的maxlength,利用鼠标的粘贴还是可以超过maxlength的限制,可以利用blur事件做判断:
代码
1 $("textarea[maxlength]").blur(function(){
2
3 var area=$(this);
4 var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
5 if(max>0){
6 if(area.val().length>max){ //textarea的文本长度大于maxlength
7 area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
8 }
9 }
10
11 });
12
2
3 var area=$(this);
4 var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
5 if(max>0){
6 if(area.val().length>max){ //textarea的文本长度大于maxlength
7 area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
8 }
9 }
10
11 });
12
失去焦点后截断textarea的文本。
通过blur事件判断后还是有问题,如果是粘贴后直接提交而没有做对textarea的长度验证的情况下,还是会把textarea的全部内容提交。