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 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Python通过select实现异步IO的方法
2015/06/04 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python imread、newaxis用法详解
2019/11/04 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Python递归函数特点及原理解析
2020/03/04 Python
Python日志器使用方法及原理解析
2020/09/27 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
公司廉洁自律承诺书
2014/03/27 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书