TextArea不支持maxlength的解决办法(jquery)
更新时间：2011年09月13日 20:32:07 作者：
自己写了一个jquery的扩展，这样就可以很容易实现对textarea控制最大长度了。
用.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();
});
扩展代码如下：
复制代码 代码如下:
(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();
});
相关文章
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
表格奇数偶数行不同样式,相信很多网友都想试试手吧，由于经验上千所以只能半途而废，为了响应网友的心声，本文整理了一些操作技巧，有图为证，感兴趣的朋友可以了解下哦2013-01-01
这篇文章主要介绍了jquery动画特效结合css实现侧边弹出的垂直导航的方法及代码分享,需要的朋友可以参考下2014-12-12
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
这篇文章主要介绍了jQuery头像裁剪工具jcrop用法,结合实例形式分析了jQuery头像裁剪工具jquery.jcrop.js具体使用技巧,并附带了完整的demo源码供读者下载参考,需要的朋友可以参考下2016-01-01
Easyui ueditor 整合解决不能编辑的问题(推荐)
这篇文章主要介绍了Easyui ueditor 整合解决不能编辑的问题 ,需要的朋友可以参考下2017-06-06
首先还是感谢下 妙味课堂 录制的这一个日历联动的视频，正好整理下，方便需要的朋友2012-05-05
这篇文章主要介绍了jQuery中DOM树操作之复制元素的方法,实例分析了DOM树复制元素的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了简单实现jQuery弹幕效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
基于Jquery插件Uploadify实现实时显示进度条上传图片
这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
开发插件的两个方法jquery.fn.extend与jquery.extend
jQuery为开发插件提拱了两个方法，分别是jquery.fn.extend与jquery.extend，接下来就为大家介绍下两者的具体使用2013-11-11
可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动2008-12-12
最新评论