JQuery为textarea添加maxlength属性的代码
更新时间：2010年04月07日 13:55:50 作者：
textarea默认不支持maxlength属性。所以通过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实现简单的DIV拖动效果,涉及jQuery针对鼠标事件的响应及页面元素的动态操作技巧,需要的朋友可以参考下2016-02-02
这边文章主要给大家介绍了jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray，十分的详细，有需要的小伙伴可以参考下。2015-07-07
jQuery javaScript捕获回车事件(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）
这篇文章主要介绍了jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了详解jQuery中的元素的属性和相关操作,jQuery是最为流行的JavaScript库,需要的朋友可以参考下2015-08-08
动态绑定键盘事件的方法或许会有很多，在本文将为大家介绍下jquery是如何快捷实现的，感兴趣的朋友不要错过2013-10-10
jquery text,radio,checkbox,select操作实现代码
学习jquery的朋友看参考下，对form等文本框的一些控制实现代码。2009-07-07
客户端用一个html页面调用一个ashx文件（一般http处理程序），返回 json格式的自定义对象2010-04-04
each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。2010-03-03
ajax联动框想必大家早有所耳闻，接下来将介绍jquery实现另一种形式的联动框，右边的联动框用jquery生成，仿照上篇的js方法修改的，感兴趣的你可以参考下希望可以帮助到你2013-03-03
最新评论