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 相关文章推荐
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
vue 实现特定条件下绑定事件
Nov 09 Javascript
JavaScript对象原型链原理解析
Jan 22 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
php环境无法上传文件的解决方法
2014/04/30 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
python队列queue模块详解
2018/04/27 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
python的常见矩阵运算(小结)
2019/08/07 Python
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
庆元旦广播稿
2014/02/10 职场文书
党课培训主持词
2014/04/01 职场文书
服务行业标语口号
2015/12/26 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
mysql left join快速转inner join的过程
2021/06/30 MySQL