限制textarea 文本框的長度(收集了幾個辦法)

文章參考地址：http://blog.csdn.net/nhconch/article/details/4223076

需求背景：

前幾天，因為客戶有一個需求說，需要對一個評論（一個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>  

js 代碼：

function limitLength(obj, length) {
            var desc = obj.value;
            obj.value = substr(obj.value, length);
        }
        function substr(str, length) {
            var l = 0, i = 0;
            while (l < length && i < str.length) {
                l += 1;
                if (str.substring(i, i + 1).match(/[\u4e00-\u9fa5]/)) l += 2; //一個中文是相當於3個英文   
                i += 1;
            }
            return str.substring(0, i);
        }  

 

兼容性效果如下：

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
兼容	兼容	兼容

這個方案比較復雜。。。但是很完美的兼容了上面三個瀏覽器！~~ 親們 你們自己選擇吧！！！