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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
跟我学习javascript的循环
Nov 18 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
浅谈js中的bind
Mar 18 Javascript
详解用async/await来处理异步
Aug 28 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python 元组操作总结
2019/09/18 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
求职自荐信
2013/12/14 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
计算机专业求职信
2014/06/02 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
pytorch 如何使用float64训练
2021/05/24 Python