使用 javascript 设置 maxlength答案

【问题标题】：setting maxlength using javascript使用 javascript 设置 maxlength
【发布时间】：2010-10-12 15:26:15
【问题描述】：

我正在尝试使用 JavaScript 动态设置输入字段的最大长度。显然这是 IE 中的一个问题，我找到了部分解决方案。

$("input#title").get(0).setAttribute("max_length", 25);
$("input#title").get(0).setAttribute(
                        "onkeypress", 
                        "return limitMe(event, this)");

function limitMe(evt, txt) {
    if (evt.which && evt.which == 8) return true;
    else return (txt.value.length < txt.getAttribute("max_length");
}

它可以在 Firefox 中运行，但由于某种原因不能在 IE 中运行。但是，它适用于这样设置的输入字段：

<input type="text" max_length="25" onkeypress="return limitMe(event, this);"/>

但由于输入字段是动态创建的，我不能这样做...有什么想法吗？

【问题讨论】：

标签： javascript html forms

【解决方案1】：

这里的所有答案都依赖于按键/粘贴事件。这是我使用input 事件的解决方案：

$('input').on('input', onInput);

var inputValue = '';

function onInput(e) {
    if(e.currentTarget.value.length > 30) {
        e.currentTarget.value = titleValue;
        return;
    }

    inputValue = e.currentTarget.value;
}

【讨论】：

【解决方案2】：

IE 在 setAttribute() 上区分大小写，只有 "maxLength" 有效...

var el=document.createElement('input'); el.setAttribute('maxLength',25);

【讨论】：

为什么是大写的 L？我认为它是最大长度，而不是最大长度。这是 html 的东西，而不是 jaVaScRipt 的东西。

【解决方案3】：

因为我对@James 的回答有些麻烦，所以我写的东西即使在复制粘贴内容时也有效，尤其是在使用 IE8 及以下版本时。我的实现使用 jQuery 及其实时事件。

jQuery(function () {
    $('body').on('keydown.maxlength_fix', 'textarea[maxlength]', function (e) {
        var $this = $(this);
        window.setTimeout(function () {
            var val = $this.val();
            var maxlength = $this.attr('maxlength');
            if (val.length > maxlength) {
                $this.val(val.substr(0, maxlength));
            }
        }, 4);
    });
});

【讨论】：

【解决方案4】：

我的代码也打印出书面/最大字符，忽略那部分。

$("[maxlength]").bind("keyup focusin", function(){
    var maxkey = $(this).attr("maxlength");
    var length = $(this).val().length;
    var value = $(this).val();
    $(this).parent().find(".counter").text(length+"/"+maxkey);
    if (length > maxkey) $(this).val(value.substring(0, maxkey));
}).bind("focusout", function(){$(this).parent().find(".counter").text("")});

【讨论】：

【解决方案5】：

不要忘记，如果您通过 JavaScript 设置 maxlength，其他人也可以轻松地将 maxlength 更改为他们喜欢的任何值。您仍然需要在服务器上验证提交的数据。

【讨论】：

【解决方案6】：

如果您使用的是 jQuery，那么为什么不充分利用它的抽象呢？

例如

代替：

$("input#title").get(0).setAttribute("max_length", 25);
$("input#title").get(0).setAttribute(
                        "onkeypress", 
                        "return limitMe(event, this)");
function limitMe(evt, txt) {
    if (evt.which && evt.which == 8) return true;
    else return (txt.value.length < txt.getAttribute("max_length");
}

这样做：

$('input#title').attr('maxLength','25').keypress(limitMe);

function limitMe(e) {
    if (e.keyCode == 8) { return true; }
    return this.value.length < $(this).attr("maxLength");
}

编辑：它在 IE 中不起作用的原因可能是因为您如何通过 setAttribute 附加“onKeyPress”处理程序。 - 这不是注册事件处理程序的正确方法。

【讨论】：

我发现 jQuery 的 attr() 实际上设法以正确的方式设置 maxlength，所以我不必使用自己的函数。优秀！谢谢，伙计（：

【解决方案7】：

您要查找的属性是maxlength，而不是max_length。见here。

【讨论】：

对不起，我应该包括你不能在 IE 中动态设置“maxlength”的事实。