JQuery textarea添加maxlength属性的例子

发布时间:2019-07-25编辑:脚本学堂
我们知道,textarea默认是不支持maxlength属性的。如今,我们有了jquery,一切不再难,通过JQuery的keyup事件,可以实现为textarea添加maxlength属性。

我们知道,textarea默认是不支持maxlength属性的。
如今,我们有了jquery,一切不再难,通过JQuery的keyup事件,可以实现为textarea添加maxlength属性。
 

复制代码 代码示例:
<html>
<head>
<title>JQuery textarea添加maxlength属性_http://www.jb200.com</title>
<script type="text/javascript" src="/js/jquery-1.4.js"></script>
</head>
<body>
<textarea style="width:300px; height:60px;" maxlength="10"></textarea>
</body>
</html>
<script type="text/javascript">
$(function(){
$("textarea[maxlength]").keyup(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本长度大于maxlength
area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
}
}
});
});
</script>

但是,如果只使用keyup事件,则只能判断键盘输入的maxlength,通过鼠标粘可以很容易绕过maxlength的限制。
遇到这种情况时,可以使用blur事件来作判断。
 

复制代码 代码示例:
$("textarea[maxlength]").blur(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本长度大于maxlength
area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
}
}
});

以上代码,失去焦点后截断textarea的文本。
不过,通过blur事件判断后还是有问题,如果粘贴后直接提交而没有对textarea作长度验证,还是会全部提交textarea中的内容。
这个问题,有空再好好琢磨下。