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 相关文章推荐
关于query Javascript CSS Selector engine
Apr 12 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
微信小程序日历效果
Dec 29 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
javascript实现简单页面倒计时
Mar 02 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP EOT定界符的使用详解
2008/09/30 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
python difflib模块示例讲解
2017/09/13 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python如何修改装饰器中参数
2018/03/20 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
基于python实现复制文件并重命名
2020/09/16 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
python爬取youtube视频的示例代码
2021/03/03 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
毕业生就业自荐信
2013/12/04 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2014年纪委工作总结
2014/12/05 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
mysql的数据压缩性能对比详情
2021/11/07 MySQL