如何使用CSS(或jQuery,如有必要)限制输入HTML输入的字符数？

Question

我可以根据另一个控件的状态操作一个控件,如这个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？

Answer 1

的jsfiddle

首先,设置maxlength如下:<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
        });

}); 

上面还有一个较小的问题,那就是ie:用户最初输入超过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;
    });

}); 

如果你想使用你构建的代码去专业,你可能还想 通过存储最后一个(长一个)类型的值
来防止用户感到愚蠢
.如果用户点击该复选框,比实现"嗯......这是愚蠢的",打勾就关闭一次他应该找回昔日的价值:

的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");
    });

});