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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js实现拉伸拖动iframe的具体代码
Aug 03 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
php防注
2007/01/15 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Vue精简版风格概述
2018/01/30 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
string = null 和string = ''的区别
2013/04/28 面试题
业务部门经理岗位职责
2014/02/23 职场文书
大学应届生的自我评价
2014/03/06 职场文书
大学新闻系自荐书
2014/05/31 职场文书
淘宝客服工作职责
2014/07/11 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
个人收入证明范本
2015/06/12 职场文书
公司新员工欢迎词
2015/09/30 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
nginx常用配置conf的示例代码详解
2022/03/21 Servers