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实现的鼠标经过时播放声音
May 18 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php连接数据库代码应用分析
2011/05/29 PHP
解析php中curl_multi的应用
2013/07/17 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
Jquery异步提交表单代码分享
2015/03/26 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
Python list操作用法总结
2015/11/10 Python
Python装饰器用法示例小结
2018/02/11 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
党员干部群众路线个人整改措施
2014/09/18 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
机关工会工作总结2015
2015/05/26 职场文书
SQL Server内存机制浅探
2022/04/06 SQL Server
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers