如何使用 CSS（或 jQuery，如有必要）限制输入到 HTML 输入中的字符数？答案

【问题标题】：How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?如何使用 CSS（或 jQuery，如有必要）限制输入到 HTML 输入中的字符数？
【发布时间】：2015-08-16 22:25:53
【问题描述】：

我可以根据另一个控件的状态来操作一个控件，如this jsfiddle 所示，其中 Checkbox 的状态会改变 Textbox 的宽度和背景颜色。

HTML 是：

<input type="checkbox" id="ckbxEmp" >czech Bachs
<input type="text" id="txtbxSSNOrITIN">

jQuery 是：

$(document).on("change", '[id$=ckbxEmp]', function () {
    if ($(this).is(":checked")) {
        $('[id$=txtbxSSNOrITIN]').css('background-color', '#ffff00');
        $('[id$=txtbxSSNOrITIN]').css('width', '24');
    } else {
        $('[id$=txtbxSSNOrITIN]').css('background-color', 'green');
        $('[id$=txtbxSSNOrITIN]').css('width', '144');
    }
});

但除此之外，我真正需要做的是根据复选框的状态来限制用户输入文本框的字符数。我该如何做到这一点，最好使用 CSS，但如果需要，使用 jQuery？

【问题讨论】：

标签： jquery html css dynamic restrict

【解决方案1】：

jsFiddle

首先，设置maxlengthlike：<input type="text" id="txtbxSSNOrITIN" maxlength="5">

$(document).on("change", '[id$=ckbxEmp]', function () {

    var ckd = this.checked;                        // ckd is now a boolean 
    $('[id$=txtbxSSNOrITIN]')
        .attr("maxlength", ckd? 2 : 5)             // 2 characters if checked, else 5
        .css({
            background: ckd? '#ffff00' : "green",  // yellow if checked, else green
            width: ckd? 24 : 144                   // 24px if checked, else 144
        });

});

上面还有一个较小的问题，即如果用户最初输入超过 5 个字符，如果您单击复选框，则值长度仍为 5！所以你需要一个额外的条来删除不需要的字符，比如：

$(document).on("change", '[id$=ckbxEmp]', function () {

    var ckd = this.checked;
    $('[id$=txtbxSSNOrITIN]').attr("maxlength", ckd? 2 : 5).css({
       background: ckd? '#ffff00' : "green",
       width: ckd? 24 : 144
    }).val(function(i, v){
       // If checked, slice value to two characters:
       return ckd && v.length>2 ? v.slice(0,2) : v;
    });

});

如果您想go-pro 使用您构建的代码，您可能还需要
防止用户感到愚蠢
通过存储最后一个（长的）键入的值。如果用户点击复选框，然后意识到“嗯……那太愚蠢了”，通过再次勾选它关闭，他应该取回旧值：

jsFiddle

$(document).on("change", '[id$=ckbxEmp]', function () {   

    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    if(ckd) $input.data("oldValue", $input.val() ); // Remember the current value

    $input.prop("maxlength", ckd? 2 : 5).css({
        background: ckd? '#ffff00' : "green",
        width: ckd? 24 : 144
    }).val(function(i, v){
        // If checked, slice value to two characters:
        return ckd && v.length>2 ? v.slice(0,2) : $input.data("oldValue");
    });

});

【讨论】：

太棒了！你摇滚，Roko
代码为谁编译：我在这里将这个已经永生的交换永生化：codeproject.com/Tips/997548/…
@B.ClayShannon 哇！感谢您的提及。有趣且巧妙地使用英语！用于获取生成 ID 的 $= 内容将拯救灵魂。我很确定。只是，在 代码分解 部分中，我错过了一个 SO 链接和一些解释新代码与原始代码相比的作用。关于data-* attr 的使用的一些话。存储值和三元（AKA 条件）运算符 (condition?ifTrue:else) 和实际的 need 操作字符（我认为目前有点混淆）会遮蔽一些光。再次感谢并继续写作！你是天生的天才！
大多数人讨厌我的写作，我家门口没有 Choctypi 就证明了这一点。
我根据您的建议更新了提示（添加了缺失的链接*，以及一些关于“更好”版本的 jQuery 的解释性代码）。 * 我会对“缺失的环节”开个玩笑，但是，引用 Chuck Berry 的话，这对我来说太过分了。

【解决方案2】：

我认为这与 CSS 无关。

jquery/javascript 方法会在输入字段中设置一个默认的 maxlength，然后在复选框事件中更改它的属性。然后可以将数值绑定到 CSS 属性。

$('[id$=txtbxSSNOrITIN]').attr("maxlength", adjustedInputLengthVal );

如果要缩小到更短的长度，还必须裁剪文本。

参考： Can I specify maxlength in css?

【讨论】：

【解决方案3】：

你做的和改变样式一样：

$('#txtbxSSNOrITIN').attr('maxlength', '2');

还要注意我是如何替换选择器 #txtbxSSNOrITIN 的。这是一种更好更快的按 id 选择方法。

$('#txtbxSSNOrITIN').attr('maxlength', '10');

如果未选中复选框会发生这种情况（仅作为示例）

如果 maxlength 属性受到约束，请不要忘记切断用户输入的值

$('#txtbxSSNOrITIN').val($('#txtbxSSNOrITIN').val().substr(0,2));

这发生在 if 块中。你的小提琴在这里修改：

http://jsfiddle.net/jy6t5oru/7/

【讨论】：

重新你的条件文本问题——不要只是删除问题；如果它是自我回答的，请回答它。此外，问题不包括您遇到的错误，导致很多 cmets。
我想删除它。不过谢谢:)

【解决方案4】：

使用CSS 是不可能的。只需通过jQuery将maxlength属性添加到输入字段

$(document).on("change", '[id$=ckbxEmp]', function () {
    if ($(this).is(":checked")) {
        $('[id$=txtbxSSNOrITIN]').css('background-color', '#ffff00');
        $('[id$=txtbxSSNOrITIN]').attr('maxlength', '24');
    } else {
        $('[id$=txtbxSSNOrITIN]').css('background-color', 'green');
        $('[id$=txtbxSSNOrITIN]').attr('maxlength', '144');
    }
});

【讨论】：

【解决方案5】：

如果你不介意的话。采取我的方法：maxlength

<input type="text" maxlength="10" />

【讨论】：