给textarea增加长度限制的几种方法

来源：编程手札时间：2009-06-04 12:27:00　

最简单的：

<textarea name="A" cols="45" rows="2" onKeyDown='if (this.value.length>=20){event.returnValue=false}'>aaaa</textarea>

简单有效，但问题是输入20个字符后边删除键、光标键通通失效，未够20个字符时粘贴一段长文字也可以突破限制。

最粗暴的：

用户会很疑惑，我明明录入了内容怎么一放手都没了, 而且光标键都跳到后面。

最牛的：

<html><head><title>IE和FireFox中的textarea长度限制</title></head><body><textarea maxlength="10" onpropertychange="onmyinput(this)" oninput="return onmyinput(this)" onPaste="return onmypaste(this);" onKeyPress="return onmykeypress(this);"></textarea>//功能：IE和FireFox中的textarea长度限制//作者：铁血骷髅<script type="text/javascript">function onmyinput(o){ if(o.value.length>=o.getAttribute("maxlength")) { if(o.value.length>o.getAttribute("maxlength")) o.value = o.value.substring(0,o.getAttribute("maxlength")); return false; } return true;}function mygetclipdata(){ if(!document.all) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); trans.addDataFlavor('text/unicode'); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); clip.getData(trans,clip.kGlobalClipboard); var str=new Object(); var strLength=new Object(); trans.getTransferData("text/unicode",str,strLength); if (str) str=str.value.QueryInterface(Components.interfaces.nsISupportsString); var pastetext; if (str) pastetext=str.data.substring(0,strLength.value / 2); return pastetext; } else { return window.clipboardData.getData("Text"); }}function mysetclipdata(o){ if(!document.all) { netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard); var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable); trans.addDataFlavor("text/unicode"); var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString); str.data=o; trans.setTransferData("text/unicode",str,o.length*2); var clipid=Components.interfaces.nsIClipboard; clip.setData(trans,null,clipid.kGlobalClipboard); } else { window.clipboardData.setData("Text",o); }}function onmypaste(o){ var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):""; if(!document.all) { alert("不可能执行的代码"); } else { if(document.selection.createRange().text.length>0) { var ovalueandclipboarddata = o.value +window.clipboardData.getData("Text"); if(o.getAttribute && ovalueandclipboarddata.length-document.selection.createRange().text.length>nMaxLen) { if(window.clipboardData.getData("Text").substring(0,document.selection.createRange().text.length+nMaxLen-o.value.length)!="") window.clipboardData.setData("Text",window.clipboardData.getData("Text").substring(0,document.selection.createRange().text.length+nMaxLen-o.value.length)); else return false; } } else { var ovalueandclipboarddata = o.value +window.clipboardData.getData("Text"); if(o.getAttribute && ovalueandclipboarddata.length>nMaxLen) { if(ovalueandclipboarddata.substring(0,nMaxLen-o.value.length)!="") window.clipboardData.setData("Text",ovalueandclipboarddata.substring(0,nMaxLen-o.value.length)); else return false; } } return true; }}function onmykeypress(o){ if(!document.all) { var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):""; if(onmykeypress.caller.arguments[0].ctrlKey == true) { if(onmykeypress.caller.arguments[0].which==118) { if(o.selectionStart<o.selectionEnd) { var ovalueandclipboarddata = o.value + mygetclipdata(); if(o.getAttribute && (ovalueandclipboarddata.length-o.selectionEnd + o.selectionStart>nMaxLen)) { if(mygetclipdata().substring(0,o.selectionEnd - o.selectionStart+nMaxLen-o.value.length)!="") mysetclipdata(mygetclipdata().substring(0,o.selectionEnd - o.selectionStart+nMaxLen-o.value.length)); else return false; } } else { var ovalueandclipboarddata = o.value +mygetclipdata(); if(o.getAttribute && ovalueandclipboarddata.length>nMaxLen) { if(ovalueandclipboarddata.substring(0,nMaxLen-o.value.length)!="") mysetclipdata(ovalueandclipboarddata.substring(0,nMaxLen-o.value.length)); else return false; } } return true; } } if(onmykeypress.caller.arguments[0].which==0 || onmykeypress.caller.arguments[0].which==8) return true; if(o.value.length>=o.getAttribute("maxlength")) { if(o.selectionStart<o.selectionEnd) return true; if(o.value.length>o.getAttribute("maxlength")) o.value = o.value.substring(0,o.getAttribute("maxlength")); return false; } else return true; } else { if(document.selection.createRange().text.length>0) return true; if(o.value.length>=o.getAttribute("maxlength")) return false; else return true; }}</script></body></html>

只有想不到，没有做不到，写这代码的哥们太太太牛了。

标签：JavaScript,textarea,长度,限制

投稿

给textarea增加长度限制的几种方法

猜你喜欢

妙用Dreamweaver MX共享WPS Office文件

CSS 超链接图标规范 V1.0

使用Canal实现PHP应用程序与MySQL数据库的实时数据同步

Asp模板制作方法详解

SQLServer中数据库文件的存放方式，文件和文件组

sql 常用技巧整理

IE的有条件注释详解（附实例代码）

在flash中使用XML动态菜单

SQL语句练习实例之四找出促销活动中销售额最高的职员

用asp获取微软安全更新列表的代码小偷程序

巧用特殊的空格字符

FileUpload上传图片预览不变形

如何捕获人家站点的页面？

阿里巴巴工程师分享MySQL经验

减少SQL Server死锁的方法

asp实现*号隐藏IP地址

ASP长文章分页代码实例

ASP的数据命名有什么规则吗？

XMLHTTP错误The server name or address could not be resolved 的解决过程

瞬间的设计 I

给textarea增加长度限制的几种方法

猜你喜欢

妙用Dreamweaver MX共享WPS Office文件

CSS 超链接图标规范 V1.0

使用Canal实现PHP应用程序与MySQL数据库的实时数据同步

Asp模板制作方法详解

SQLServer中数据库文件的存放方式，文件和文件组

sql 常用技巧整理

IE的有条件注释详解（附实例代码）

在flash中使用XML动态菜单

SQL语句练习实例之四 找出促销活动中销售额最高的职员

用asp获取微软安全更新列表的代码 小偷程序

巧用特殊的空格字符

FileUpload上传图片预览不变形

如何捕获人家站点的页面？

阿里巴巴工程师分享MySQL经验

减少SQL Server死锁的方法

asp实现*号隐藏IP地址

ASP长文章分页代码实例

ASP的数据命名有什么规则吗？

XMLHTTP错误The server name or address could not be resolved 的解决过程

瞬间的设计 I

SQL语句练习实例之四找出促销活动中销售额最高的职员

用asp获取微软安全更新列表的代码小偷程序