限制textarea 文本框的长度
前几天，因为客户有一个需求说，需要对一个评论（一个textarea文本框）的长度进行限制，简单的理解就是 这个文本框只能输入100个字符，然后就不能在输入了！
实现方案一：用maxlength属性
<textarea maxlength="10"></textarea>
这个方式很简单的哦，但是 在我这边测试的时候，并不能完全兼容主流浏览器
兼容性效果如下：
| IE8 | Firefox 17 | Chrome 23 |
| 不兼容 | 兼容 | 兼容 |
实现方案二：用javascript实现
<textarea name="txt1" cols="45" rows="2" onKeyDown='if (this.value.length>=20){event.returnValue=false}'></textarea>
这里就用到了一个onKeyDown。但是效果也不太理想。
兼容性效果如下：
| IE8 | Firefox 17 | Chrome 23 |
| 兼容 | 不兼容 | 兼容 |
实现方案三：综合上面的方法
因为上面无法兼容IE 和firefox，没办法，只能贱一点了！~所以，我就把上面的方法给综合起来~~
代码如下：
<textarea name="txt1" cols="45" maxlength="20" rows="2"
onKeyDown='if (this.value.length>=20){event.returnValue=false}'>b</textarea>
注意哦，我只是把maxlength加上了！
兼容性效果如下：
| IE8 | Firefox 17 | Chrome 23 |
| 兼容 | 兼容 | 兼容 |
原因很简单，maxlength是对firefox和chrome兼容，而那js代码是对IE 兼容。所以就ok啦！！我把
嘻嘻。。那天因为要提交这个ticket 所以急着交咯，反正客户那边通过啦。。哇哇哇。。
实现方案四：JavaScript的substring
<textarea name="blogdesc" cols="50" rows="5" onkeyup="limitLength(this,20)">x </textarea>
兼容性效果如下：
| IE8 | Firefox 17 | Chrome 23 |
| 兼容 | 兼容 | 兼容 |
但是，其实这个虽然上面三个都兼容，但是有一个很不友好的问题是，当你达到字符限制的时候，它还会打出来，直到你松开按键的时候就好了。不过，这个时候 会有闪一下把后面多余的字符给删除了！~。不太友好哦！~亲。
实现方案五：JavaScript
<textarea maxlength="10" onpropertychange="onmyinput(this)" oninput="return onmyinput(this)" onpaste="return onmypaste(this);" onkeypress="return onmykeypress(this);"></textarea>
js代码是：
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; } }
| IE8 | Firefox 17 | Chrome 23 |
| 兼容 | 兼容 | 兼容 |
这个方案比较复杂。。。但是很完美的兼容了上面三个浏览器！~~ 亲们 你们自己选择吧！！！
