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 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
JavaScript面向对象编程
Mar 02 Javascript
DOM 事件流详解
Jan 20 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
JavaScript中return用法示例
Nov 29 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
js实现九宫格抽奖
Mar 19 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Python字符串格式化输出方法分析
2016/04/13 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
Python的信号库Blinker用法详解
2020/12/31 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
西尔斯百货官网:Sears
2016/09/06 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
产品生产计划书
2014/05/07 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书