TextArea不支持maxlength的解决办法(jquery)


Posted in Javascript onSeptember 13, 2011

用.net 控件久了,在给一个页面的TextBox 增加控制长度的控制时,简单的加了一个maxlength='xxx' 就行,可是测试确总是不过,原因是设置了多行模式,在这样的情况下生成的html代码就是textarea,同时maxlength属性就没有被增加上,因为IE不支持textarea 的 maxlength属性,于是,在firefox 6中测试,发现firefox是支持这个属性的。那么就简单了。自己写了一个jquery的扩展,这样就可以很容易实现对textarea控制最大长度了。
扩展代码如下:

(function($){ 
$.fn.textarealimit = function(settings) { 
settings = jQuery.extend({ 
length:1000 
}, settings); 
maxLength =settings.length; 
$(this).attr("maxlength",maxLength).bind("keydown",doKeydown).bind("keypress",doKeypress).bind("beforepaste",doBeforePaste).bind("paste",doPaste); 
function doKeypress() 
{ 
var oTR = document.selection.createRange() 
if(oTR.text.length >= 1) 
event.returnValue = true 
else if(this.value.length > maxLength-1) 
event.returnValue = false 
} 
function doKeydown() 
{ 
var _obj=this; 
setTimeout(function() 
{ 
if(_obj.value.length > maxLength-1) 
{ 
var oTR = window.document.selection.createRange() 
oTR.moveStart("character", -1*(_obj.value.length-maxLength)) 
oTR.text = "" 
} 
},1) 
} 
function doBeforePaste() 
{ 
event.returnValue = false 
} 
function doPaste() 
{ 
event.returnValue = false 
var oTR = document.selection.createRange() 
var iInsertLength = maxLength - this.value.length + oTR.text.length 
var sData = window.clipboardData.getData("Text").substr(0, iInsertLength) 
oTR.text = sData; 
} 
} 
})(jQuery);

以上只是针对IE控制了复制粘贴的控制以及输入时控制,由于使用IE的特性,这些方法在firefox中是无效的。
调用代码:
$(document).ready(function() { 
$("#ctl00_ZiiOContent_ucQuestionnaire_txtquestion4_2").textarealimit(); 
});
Javascript 相关文章推荐
JavaScript之引用类型介绍
Aug 10 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
详解vue中移动端自适应方案
May 05 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
JQuery与JSon实现的无刷新分页代码
Sep 13 #Javascript
js Event对象的5种坐标
Sep 12 #Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 #Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 #Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 #Javascript
jquery tab插件精简版分享
Sep 10 #Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
python执行精确的小数计算方法
2019/01/21 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
外贸英语毕业生自荐信
2013/11/14 职场文书
初中毕业生自我评价
2015/03/02 职场文书
大学生英文求职信范文
2015/03/19 职场文书
同学会演讲稿
2019/04/02 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL