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 getScript动态加载JS方法改进详解
Nov 15 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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之sphinx
2013/05/15 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python Socket传输文件示例
2017/01/16 Python
Python可变参数用法实例分析
2017/04/02 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Python 解析xml文件的示例
2020/09/29 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Ruby如何定义一个类
2012/10/08 面试题
年终考核评语
2014/01/19 职场文书
高考备战决心书
2014/03/11 职场文书
学历公证书范本
2014/04/09 职场文书
单位作风建设自查报告
2014/10/23 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS