How can I restrict the number of characters entered into an HTML Input with CSS (or jQuery, if necessary)?

Question

I can manipulate a control based on the state of another control, as shown in this jsfiddle, where the state of a Checkbox alters the width and background color of a Textbox.

The HTML is:

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

The jQuery is:

$(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');
    }
}); 

But besides this, what I really need to do is to restrict the number of characters the user enters into the Textbox, according to whether the checkbox's state. How can I do that, preferably with CSS but, if necessary, jQuery?

Answer 1

jsFiddle

First, set maxlength like: <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
        });

}); 

There's still a smaller issue above, and that's if i.e: user enters initially more than 5 characters, if you click the checkbox the value length will still be 5! So you'll need an additional strip, to remove unwanted characters like:

$(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;
    });

}); 

If you want to go-pro with the code you build, you might want additionally
prevent the user to feel stupid
by storing the last (the long one) typed value. If the user clicks the checkbox and than realizes "well... that was stupid", by ticking it off again he should get back the old value:

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

});