解决IE下textarea不识别maxlength属性的问题

首先先看一个比较简单的处理办法,代码如下:

  $("textarea[maxlength]").keyup(function () {

            var area = $(this);

            var max = parseInt(area.attr("maxlength"), 10); //获取maxlength的值

            if (max > 0) {

                if (area.val().length > max) { //textarea的文本长度大于maxlength

                    area.val(area.val().substr(0, max)); //截断textarea的文本重新赋值

                }

            }

        });

        //复制的字符处理问题

        $("textarea[maxlength]").blur(function () {

            var area = $(this);

            var max = parseInt(area.attr("maxlength"), 10); //获取maxlength的值

            if (max > 0) {

                if (area.val().length > max) { //textarea的文本长度大于maxlength

                    area.val(area.val().substr(0, max)); //截断textarea的文本重新赋值

                }

            }

        });

代码很简单,但是体验不太好,就是你会看到textarea里面字符已经输进去了,然后进行的字符截断,这种体验明显和input中设置maxlength属性的效果(体验)不一样,但也能凑合着用了。下面我们看较复杂的实现,下面这种实现所得到的体验效果就和input设置maxlength的一样了

function onmyinput(o, maxLength) {

    if (o.value.length >= maxLength) {

        if (o.value.length > maxLength) o.value = o.value.substring(0, 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, maxLength) {

    var nMaxLen = o.getAttribute ? parseInt(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, maxLength) {

    if (!document.all) {

        var nMaxLen = o.getAttribute ? parseInt(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 >= maxLength) {

            if (o.selectionStart < o.selectionEnd) return true;

            if (o.value.length > maxLength) o.value = o.value.substring(0, maxLength);

            return false;

        } else return true;



    } else {

        if (document.selection.createRange().text.length > 0) return true;

        if (o.value.length >= maxLength) return false;

        else return true;

    }

}

window.onload = init_MaxLength;

function init_MaxLength() {

    var textAreaObj = document.getElementsByTagName("textarea");

    var maxLength;

    for (var i = 0; i < textAreaObj.length; i++) {

        maxLength = textAreaObj[i].getAttribute("maxLength") == null ? 0 : textAreaObj[i].getAttribute("maxLength");

        if (maxLength == 0) continue;

        textAreaObj[i].onpaste = function () {

            return onmypaste(this, maxLength)

        };

        textAreaObj[i].onkeypress = function () {

            return onmykeypress(this, maxLength)

        };

        textAreaObj[i].onpropertychange = function () {

            onmyinput(this, maxLength)

        };

        if (!document.all) {

            textAreaObj[i].setAttribute("oninput", "return onmyinput(this," + maxLength + ")");

        }

    }

}

 

你可能感兴趣的:(textarea)