JAVASCRIPT应用篇(5)--设置TEXTAREA的MAXLENGTH属性
来源:互联网 发布:单片机串口和usb 编辑:程序博客网 时间:2024/06/03 21:37
标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用
如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
但TEXT中有且起作用<input type="text" maxlength="20">,
那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢。
方法1、如果只需要截取多少个字符的内容,则可以:
<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>
或
<textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea>
方法2、
<script type="text/javascript">
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>
<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>
这个方法采用截断法,输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用CTRL+C复制过来的长度限制问题,但如果用鼠标复制过来的不还是不行。
方法3、这个方法直接判断输入的长度
<script language="javascript" type="text/javascript">
<!--
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <MaxLen);
}
-->
</script>
<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ></textarea>
当输入内容大于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
上面的方法在原来的基础上加了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
- JAVASCRIPT应用篇(5)--设置TEXTAREA的MAXLENGTH属性
- JAVASCRIPT应用篇(5)--设置TEXTAREA的MAXLENGTH属性
- JAVASCRIPT应用篇(5)--设置TEXTAREA的MAXLENGTH属性
- 设置TEXTAREA的MAXLENGTH属性 .
- JavaScript实现textarea的maxlength
- textarea的maxlength和wrap属性
- IE6-9不支持Textarea的maxlength属性
- IE6-9不支持Textarea的maxlength属性
- textarea实现maxlength属性
- textarea maxlength属性
- JavaScript實現TextArea的MaxLength效果
- 控制textarea长度 textarea的maxlength属性一样有效果
- 辛辛苦苦整合的TextArea设置MaxLength的代码
- 代码设置maxLength属性
- textarea解决maxlength的兼容问题
- JS实现textarea对象Maxlength属性
- 限制textarea的最大输入字符数 (就象中text的maxlength属性)
- EditText的maxLength属性
- 欲为Java技术大牛所需的25个学习要点
- 第3章 命名规则
- C#如何让TEXTBOX只能输入英文状态下的数字并且限制位数
- 为Python创建扩展,使python能实现内存共享
- function
- JAVASCRIPT应用篇(5)--设置TEXTAREA的MAXLENGTH属性
- 通过内存映射实现进程间通信
- D触发器原理图和真值表以及波形图分析
- float与double:坚决弃float用double一例
- informix的系统结构
- 欲为Java技术大牛所需的25个学习要点
- Js DOM编程(1)
- 也谈typedef[转]
- DDL和DML的定义和区别