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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript定时器完整实例
Feb 10 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 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 MVC
2014/09/10 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
jquery text()要注意啦
2009/10/30 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python实现维吉尼亚加密法
2019/03/20 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python画双y轴图像的示例代码
2019/07/07 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
2014新年元旦活动策划方案
2014/02/18 职场文书
公司承诺书怎么写
2014/05/24 职场文书
奶茶店创业计划书
2014/08/14 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技