使用 JavaScript 或 jQuery 设置文本框的最大长度答案

【问题标题】：Setting maxlength of textbox with JavaScript or jQuery使用 JavaScript 或 jQuery 设置文本框的最大长度
【发布时间】：2011-09-02 18:09:36
【问题描述】：

我想用 JavaScript 或 jQuery 更改文本框的最大长度：我尝试了以下方法，但似乎没有帮助：

var a = document.getElementsByTagName('input');
for(var i=0; i<a.length; i++) {
    if((a[i].type!= 'radio')||(a[i].type!= 'checkbox'))
        a[i].maxlength = 5;
}
document.getElementsByTagName('input')[1].maxlength="3";

$().ready(function()
{
    $("#inputID").maxlength(6);
});

我做错了什么？

【问题讨论】：

标签： javascript jquery input textbox

【解决方案1】：

不确定你在前几行中要完成什么，但你可以试试这个：

$(document).ready(function()
{
    $("#ms_num").attr('maxlength','6');
});

【讨论】：

这不是标准的，在 IE7、8 和 9 中不起作用，因此请避免使用它。
@Dynamic 你有任何链接/文档来支持它吗？根据w3Schools 和Mozilla.Org 这些仍然有效。请注意，在 Mozilla 文档中，它仅适用于以下 '' 标签类型：文本、电子邮件、搜索、密码、电话、url
这是正确的方式，Dynamic 不正确。它是一个标准属性
@Kamlesh 数字不使用与文本相同的长度。请改用min 和max 属性。

【解决方案2】：

最大长度属性是驼峰式的：maxLength

默认情况下，jQuery 不附带 maxlength 方法。此外，您的文档就绪功能在技术上也不正确：

$(document).ready(function () {
    $("#ms_num")[0].maxLength = 6;
    // OR:
    $("#ms_num").attr('maxlength', 6);
    // OR you can use prop if you are using jQuery 1.6+:
    $("#ms_num").prop('maxLength', 6);
});

另外，由于您使用的是 jQuery，您可以像这样重写您的代码（利用 jQuery 1.6+）：

$('input').each(function (index) {
    var element = $(this);
    if (index === 1) {
        element.prop('maxLength', 3);
    } else if (element.is(':radio') || element.is(':checkbox')) {
        element.prop('maxLength', 5);
    }
});

$(function() {
    $("#ms_num").prop('maxLength', 6);
});

【讨论】：

看来你是同时回答的！！
实际上，当我写我的答案时，没有其他帖子，但在我发布我的答案猎人后，我的答案直接出现在下面。它在给出快速答案和给出完整答案之间取得了微妙的平衡。

【解决方案3】：

没有jQuery你可以使用

document.getElementById('text_input').setAttribute('maxlength',200);

【讨论】：

【解决方案4】：

设置属性，而不是属性

$("#ms_num").attr("maxlength", 6);

【讨论】：

【解决方案5】：

$('#yourTextBoxId').live('change keyup paste', function(){
    if ($('#yourTextBoxId').val().length > 11) {
        $('#yourTextBoxId').val($('#yourTextBoxId').val().substr(0,10));
    }
});

我将它与 vars 和选择器缓存一起使用以提高性能，这就是诀窍..

【讨论】：

【解决方案6】：

你可以这样：

$('#inputID').keypress(function () {
    var maxLength = $(this).val().length;
    if (maxLength >= 5) {
        alert('You cannot enter more than ' + maxLength + ' chars');
        return false;
    }
});

【讨论】：

【解决方案7】：

<head>
    <script type="text/javascript">
        function SetMaxLength () {
            var input = document.getElementById("myInput");
            input.maxLength = 10;
        }
    </script>
</head>
<body>
    <input id="myInput" type="text" size="20" />
</body>

【讨论】：

【解决方案8】：

<head>
    <script type="text/javascript">
        function SetMaxLength () {
            var input = document.getElementById ("myInput");
            input.maxLength = 10;
        }
    </script>
</head>
<body>
    <input id="myInput" type="text" size="20" />
</body>

【讨论】：

因为问题是关于如何用 JS 或 JQ 做到这一点。 ;-)