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淡入淡出效果的实现思路
Mar 31 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php中的登陆login实例代码
2016/06/20 PHP
javascript创建和存储cookie示例
2014/01/07 Javascript
js获取url中"?"后面的字串方法
2014/05/15 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
浅谈Vue.use的使用
2018/08/29 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Python实现的递归神经网络简单示例
2017/08/11 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python如何删除文件、目录
2020/06/23 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
Ajax的工作原理
2015/12/04 面试题
Python多线程 Queue 模块常见用法
2021/07/04 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL