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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
Vue实现一个无限加载列表功能
Nov 13 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常用代码大全(新手入门必备)
2010/06/29 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
Python3基础之基本数据类型概述
2014/08/13 Python
Python文件处理
2016/02/29 Python
探究python中open函数的使用
2016/03/01 Python
Python获取当前路径实现代码
2017/05/08 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python retrying模块的使用方法详解
2019/09/25 Python
python无序链表删除重复项的方法
2020/01/17 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
Django视图、传参和forms验证操作
2020/07/15 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
高中毕业生个人自我鉴定
2013/11/24 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL