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 写的一个简单的timer
Jul 30 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
webpack之devtool详解
Feb 10 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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/08/08 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
Django如何实现防止XSS攻击
2020/10/13 Python
详解python算法常用技巧与内置库
2020/10/17 Python
浅谈Python __init__.py的作用
2020/10/28 Python
毕业生造价工程师求职信
2013/10/17 职场文书
员工培训心得体会
2013/12/30 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
cf搞笑广告词
2014/03/14 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
财务稽核岗位职责
2015/04/13 职场文书
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python