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必备 api中英文对照的chm手册 下载
May 03 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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
牡丹941资料
2021/03/01 无线电
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
vue引用外部JS的两种种方法
2020/01/28 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python break语句详解
2014/03/11 Python
python发送邮件实例分享
2017/07/28 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python help函数实例用法
2020/12/06 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
大学生职业生涯规划范文
2013/12/31 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL