给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增加长度限制的几种方法

猜你喜欢

Python pyecharts数据可视化实例详解

Java连接sqlserver2008数据库代码

Python递归及尾递归优化操作实例分析

Python实战之实现获取动态图表

10分钟教你用Python实现微信自动回复功能

tensorflow如何继续训练之前保存的模型实例

django执行数据库查询之后实现返回的结果集转json

如何在Linux 系统中使用apt 包管理器安装 Git LFS

python通过apply使用元祖和列表调用函数实例

golang高并发限流操作 ping / telnet

JavaScript数学对象Math操作数字的方法

Asp 返回引用类型函数代码

centos 7安装mysql5.5的方法

JS组件Form表单验证神器BootstrapValidator

使用Vue自定义指令实现Select组件

python缺失值的解决方法总结

laravel多视图共享数据实例代码

Notice: Undefined index: page in E:\\PHP\\test.php on line 14

Django程序的优化技巧

My Sql 1067错误与编码问题的解决方案