jquery如何为textarea添加maxlength属性

发布时间:2020-02-14编辑:脚本学堂
页面中textarea不支持maxlength怎么办,可以通过jquery的keyup事件或写一个jquery扩展,为textarea添加maxlength属性,这里举了二个例子,供大家参考。

jquery为textarea添加maxlength属性

textarea默认不支持maxlength属性。
可以通过jquery实现。

1、使用jquery keyup事件:
 

复制代码 代码示例:
<html>
<head>
<title>jquery为textarea添加maxlength</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
</head>
<body>
<textarea style="width:300px; height:60px;" maxlength="10"></textarea>
</body>
</html>
<script type="text/javascript">
$(function(){
$("textarea[maxlength]").keyup(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本长度大于maxlength
area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
}
}
});
});
</script>

如果只用keyup只能判断键盘输入的maxlength,利用鼠标的粘贴还是可以超过maxlength的限制,可以利用blur事件做判断:
 

复制代码 代码示例:
$("textarea[maxlength]").blur(function(){
var area=$(this);
var max=parseInt(area.attr("maxlength"),10); //获取maxlength的值
if(max>0){
if(area.val().length>max){ //textarea的文本长度大于maxlength
area.val(area.val().substr(0,max)); //截断textarea的文本重新赋值
}
}
});

失去焦点后截断textarea的文本。
通过blur事件判断后还是有问题,如果是粘贴后直接提交而没有做对textarea的长度验证的情况下,还是会把textarea的全部内容提交。

二,textarea不支持maxlength怎么办?

jquery扩展,实现对textarea控制最大长度。

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();
});