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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jquery禁用右键示例
Apr 28 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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
同时提取多条新闻中的文本一例
2006/10/09 PHP
基于PHP文件操作的详解
2013/06/05 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
ExtJS 入门
2010/10/29 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
layui动态加载多表头的实例
2019/09/05 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python命令 -u参数用法解析
2019/10/24 Python
Python: 传递列表副本方式
2019/12/19 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python实现控制台输出颜色
2021/03/02 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
九一八事变演讲稿范文
2014/09/14 职场文书