码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-10-25 18:30:52      阅读:544      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   ar   for   sp   div   on   

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

  $("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 + ")");
        }
    }
}

 

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

标签:style   blog   color   io   ar   for   sp   div   on   

原文地址:http://www.cnblogs.com/laixiancai/p/4050364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!