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中创建实例与原型继承揭秘
Dec 21 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
Node中使用ES6语法的基础教程
Jan 05 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 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中的超全局变量
2006/10/09 PHP
用PHP编写PDF文档生成器
2006/10/09 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python实现批量修改服务器密码的方法
2019/08/13 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
高一化学教学反思
2014/02/05 职场文书
人事任命通知书
2015/04/21 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
数据库连接池
2021/04/06 MySQL
对PyTorch中inplace字段的全面理解
2021/05/22 Python
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA