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 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
JS验证字符串功能
Feb 22 Javascript
webpack搭建vue 项目的步骤
Dec 27 Javascript
详解如何探测小程序返回到webview页面
May 14 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
原生JavaScript实现轮播图
Jan 10 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 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把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
理解javascript回调函数
2014/12/28 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
利用python将json数据转换为csv格式的方法
2018/03/22 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python实现爬取并分析电商评论
2020/06/19 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
华为C++笔试题
2014/08/05 面试题
护士自荐信
2013/10/25 职场文书
自主招生自荐信格式
2013/12/03 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
创新比赛获奖感言
2014/02/13 职场文书
珠宝店促销方案
2014/03/21 职场文书
投资意向书
2014/07/30 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
绵山导游词
2015/02/05 职场文书