JQuery为textarea添加maxlength属性的代码


Posted in Javascript onApril 07, 2010

通过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的全部内容提交。
Javascript 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
javascript 函数调用规则
Aug 26 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
Vue之封装公用变量以及实现方式
Jul 31 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 #Javascript
jquery 学习笔记一
Apr 07 #Javascript
ext jquery 简单比较
Apr 07 #Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 #Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 #Javascript
js 小贴士一星期合集
Apr 07 #Javascript
Javascript 实用小技巧
Apr 07 #Javascript
You might like
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
关于IIS php调用com组件的权限问题
2012/01/11 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
就业推荐自我鉴定
2013/10/06 职场文书
求职自荐书范文
2013/12/04 职场文书
海南地接欢迎词
2014/01/14 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
移交协议书
2014/08/19 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis