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

解决DHTML文档中TEXTAREA输入字符限制问题

最新推荐文章于 2021-10-21 14:43:41 发布

最新推荐文章于 2021-10-21 14:43:41 发布 · 68 阅读

文章标签：

#php #xhtml #javascript #ViewUI

本文详细介绍了在DHTML文档中使用TEXTAREA元素限制输入字符数的方法，包括截断法、判断法以及结合事件处理的综合解决方案，并讨论了不同方法的优缺点。

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

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

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

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

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

或

方法2、

<textareamaxlength="40" onkeyup="return ismaxlength(this)"></textarea>

这个方法采用截断法，输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用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

[xhtml]view plaincopy
<mce:scriptlanguage="javascript"type="text/javascript"><!--
functiontextlen(x,y){
varthelength=x.value.length;
window.status=thelength+'of'+y+'maximumcharacters.';
}
functionmaxtext(x,y){
tempstr=x.value
if(tempstr.length>y){
x.value=tempstr.substring(0,y);
}
textlen(x,y);
}
//--></mce:script>
<formname="myform">
<textareaname="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> 对于些问题的其它主要解决方法可见下面链接：

利用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.youkuaiyun.com/luweifeng1983/article/details/3935040