JQuery为textarea添加maxlength属性的代码
时间：2021-04-11 08:57:07|栏目：jquery|点击： 次
通过JQuery的keyup事件：
<html>
<head>
<title>JQuery为textarea添加maxlength</title>
<script type="text/javascript" src="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的全部内容提交。
复制代码 代码如下:
<html>
<head>
<title>JQuery为textarea添加maxlength</title>
<script type="text/javascript" src="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的全部内容提交。
上一篇：jQuery EasyUI NumberBox(数字框)的用法
栏 目：jquery
本文标题：JQuery为textarea添加maxlength属性的代码
本文地址：http://www.codeinn.net/misctech/99111.html
