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通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
Angular网络请求的封装方法
May 22 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
layui实现三级导航菜单
Jul 26 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下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
在模板页面的js使用办法
2010/04/01 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
python线程中同步锁详解
2018/04/27 Python
python版本单链表实现代码
2018/09/28 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python实现石头剪刀布程序
2021/01/20 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
生日宴会答谢词
2014/01/09 职场文书
初中地理教学反思
2014/01/11 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
供货协议书范本
2014/04/22 职场文书
安全宣传标语口号
2014/06/06 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
检讨书大全
2015/01/27 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang