zoukankan      html  css  js  c++  java
  • 解决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 + ")");
            }
        }
    }
  • 相关阅读:
    时隔 4 年!ElasticJob 3.0.0 发布,王者归来。。
    Git 代码防丢指南,再也不怕丢失代码了!
    排查线上问题必须掌握的 6 个 Linux 命令!
    Leaflet添加图片图层:ImageOverlay
    js图片数据流
    arcgis查找与要素相交的内容 by 空间连接查询
    Leaflet添加图片图层:使用Axios请求arcgis server rest api的exportmap,获取图片并进行显示
    esri-leaflet: unique value renderer唯一值渲染-dynamiclayers参数
    arcgis server缓存切片
    城市给排水法律法规
  • 原文地址:https://www.cnblogs.com/laixiancai/p/4050364.html
Copyright © 2011-2022 走看看