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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
javascript常用方法汇总
Dec 02 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 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获得当前的脚本网址
2007/12/10 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
载入进度条 效果
2006/07/08 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
团日活动总结模板
2014/06/25 职场文书
2015年公务员工作总结
2015/04/24 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
Redis性能监控的实现
2021/07/09 Redis