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动态进行图片缩略的原理及实现
Aug 13 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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给每个段落添加空格的方法
2015/03/20 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python 3中的yield from语法详解
2017/01/18 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
2014年情人节活动方案
2014/02/16 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
药店采购员岗位职责
2014/09/30 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
高中历史教学反思
2016/02/19 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL