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 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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实现的ping端口函数实例
2014/11/12 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
Javascript Objects详解
2014/09/04 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
机器学习python实战之决策树
2017/11/01 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Python识别处理照片中的条形码
2020/11/16 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
艺术学院毕业生求职信
2014/07/09 职场文书
九九重阳节标语
2014/10/07 职场文书
入股协议书范本
2014/11/01 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis