JAVASCRIPT应用篇（5）－－设置TEXTAREA的MAXLENGTH属性

luweifeng1983

浏览: 1230991 次
性别:
来自: 深圳

最近访客更多访客>>

jackzou

huanggua12353719

zhutiehan

flyelf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS应用

JavaScript ASP.net jQuery ASP HTC

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用，只有当事件发生时才起作用

如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp

但TEXT中有且起作用<input type="text" maxlength="20">，

那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢。

方法1、如果只需要截取多少个字符的内容，则可以:

或

方法2、

这个方法采用截断法，输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用CTRL+C复制过来的长度限制问题,但如果用鼠标复制过来的不还是不行。

方法3、这个方法直接判断输入的长度

<!--

function imposeMaxLength(Object, MaxLen)

{

return (Object.value.length <MaxLen);

}

-->

</script>

当输入内容大于15时因为返回为false所以这个实现不会显示光标闪烁的问题，但没有解决复制过来的长度限制问题即复制过来的内容可以超过最大长度限制

注意这个帖子里使用的情况如：http://psacake.com/web/js.asp

return (Object.value.length <=MaxLen);但我测试发现当输入字节数=maxlen时还可以输入一个字符，所以我改成 return (Object.value.length <MaxLen);

方法4、其实方法4是方法2与方法3的基础上进一步优化。客观的说方法2与方法3都只做了一部分工作

看下面链接：http://www.codingforums.com/showthread.php?t=2224

<mce:script language="javascript" type="text/javascript"><!--
function textlen(x,y){
  var thelength = x.value.length;
  window.status=thelength+' of '+y+' maximum characters.';
}

function maxtext(x,y){
tempstr = x.value
  if(tempstr.length>y){
    x.value = tempstr.substring(0,y);
  }
  textlen(x,y);
}
// --></mce:script>

<form name="myform">
     <textarea      name="mytextarea" 
                           cols="45" 
                           rows="3" 
                           wrap="virtual" 
                           onkeypress="return(this.value.length<20)"
                           onkeydown="textlen(this,20)" 
                           onkeyup="textlen(this,20)" 
                           onblur="maxtext(this,20)"
     >


上面的方法在原来的基础上加了onblur事件，这主要用于处理当用户不是采用输入而是通过复制粘贴方法来完成文本的转入时的问题。
实际就是方法2与方法3的结合版。 以下是我为TextArea增加并利用maxlength属性及结合上例的结果：
<html>
<head>
<script type="text/javascript">
function ismaxlength(obj){
	var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
	if (obj.getAttribute && obj.value.length>mlength)
		alert('该文本框允许输入最大长度为'+mlength+"个字符,超出内容将会被截断")
		obj.value=obj.value.substring(0,mlength)
	}
function imposeMaxLength(obj)
{
  var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
  return (obj.value.length <mlength);
}
</script>
</head>
<body>
<form name="myform">
   <textarea maxlength="5" onkeypress="return imposeMaxLength(this)" onblur="ismaxlength(this)"></textarea>
</form>
</body>
</html>
以上方法解决IE中textarea不支持最大长度的问题，最新的firefox是支持的，所以该方法使用上需要加上浏览器类型的判断
http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html


对于些问题的其它主要解决方法可见下面链接：

利用JQUERY框架实现：http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html

http://www.codingforums.com/showthread.php?t=2224

http://www.insidedhtml.com/ie5/htc/ts08/page2.asp

http://inmyexperience.com/archives/000327.shtml

http://blog.offbeatmammal.com/post/2006/10/26/MaxLength-on-a-Textarea.aspx

分享到：

编程网站汇编：追求更好实现 | JBoss 5.0 安装与配置详解

2009-02-25 11:15
浏览 1578
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论