解决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 + ")");
        }
    }
}
时间: 2024-11-01 21:09:27

解决IE下textarea不识别maxlength属性的问题的相关文章

[转]TextArea设置MaxLength属性最大输入值的js代码

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type="text" maxlength="20">, 那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢. 方法1.如果只需要截取多少个字符

maxlength属性在textarea里奇怪的表现

HTML5给表单带来了很多改变,比如今天要说的maxlength,这个属性可以限制输入框输入的最大字字符数,更方便的是对于粘贴的内容也能够根据字符数自动截断. 最近就接到这要一个需求,限制用户最多输入600字(汉字和字母不区分),对于粘贴的内容也要能自动截断,输入600字后就无法输入. 第一时间想到了maxlength,基本满足需求,但还是有一些怪异的表现. 看下面的代码: <textarea name="text" id="text" maxlength=&

无法识别的属性“targetFramework”的解决方法

本文导读:网站发布后,在IIS中浏览的时候出现以下异常:无法识别的属性“targetFramework”,请注意属性名称区分大小写.出现这个问题是由IIS配置该站点的.NET Framework 版本与程序中的.NET Framework配置的版本不一致引起的,修改.NET Framework 版本为相应版本即可解决 一.无法识别的属性“targetFramework”.请注意属性名称区分大小写 错误如下 “/OA”应用程序中的服务器错误. 配置错误 说明:在处理向该请求提供服务所需的配置文件时

C# 解决无法识别的属性 configProtectionProvider

在使用.Net自身提供的加密本配置文件后再用System.Configuration.ConfigurationManager.AppSettings["key"]获取值时会出现“无法识别的属性 configProtectionProvider参考” 注意: 如果你是自定义加密值再保存到配置文件和则Aspnet_regiis.exe不会出现此问题,即不使用.Net默认的加密方式 使用.Net默认加密方式示例 Configuration configuration =Configurat

无法识别的属性“targetFramework”。请注意属性名称区分大小写。错误解决办法

"/CRM"应用程序中的服务器错误.配置错误说明: 在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息: 无法识别的属性"targetFramework".请注意属性名称区分大小写. 源错误: 行 24:             设置为 true. 行 25:         -->行 26: <compilation debug="true" targetFramework

让IE下支持Html5的placeholder属性

HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等. Placeholder 是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文 字消失.以前要实现这效果都是用JavaScript来控制才能实现 , firefox.google chrome等表示对其支持 , 唯独IE存在违和感啊! 例如: <input id="t1" type

解决Window下文件名过长,导致无法删除,打开等问题

由于重装了Win8.1,在C盘会生成window.old的文件夹.本来想删除的,却出现文件名太长无法删除.那就改名呗,右键选择文件,我去,只有打开和发送选项,连属性选项都没有.当然打开和发送功能也不能正常使用. 那就用cmd来改名或删除呗,发现两个操作均由于文件名过长而失败. 由于当时没有截图,事后模拟一下,发现不能再现之前的情况: 后来google一个可行方案:可以使用文件短名来代替长长的文件名. cd C:\Windows\Vss\Writers\Application dir \x #就会

解决Firefox下input button内文字垂直居中

众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写了padding:0 2px所致): 按钮文字居中是不行的(此时设置padding-bottom是没用的) : 等等… 1 input[type="reset"]::-moz-focus-inner, 2 input[type="button"]::-moz-focus

HTML &lt;input&gt; 标签的 maxlength 属性

前端的表单,需要进行验证. 结合JS表单验证框架,写了很多前端验证的代码. 其中,有这么一个需求:用户最多只能输入10个字符. 按照惯性,肯定是会去写JS表单验证了. 实际上,根本没有必要. HTML中的maxlength属性就可以很简单地解决这个问题. <input type="text" size="10" maxlength="10" /> 通过这个很简单的属性设置,用户能够输入的字符就是10,再多就输不进去了.