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使用andSelf()来包含之前的选择集
May 19 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
window.open()实现post传递参数
Mar 12 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
layui原生表单验证的实例
Sep 09 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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
URL Rewrite的设置方法
2007/01/02 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
js常用代码段整理
2011/11/30 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
django实现分页的方法
2015/05/26 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
Python tkinter模版代码实例
2020/02/05 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
年终晚会活动方案
2014/08/21 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书