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

Answer 1

I don't think it's possible to do with CSS.

The jquery/javascript approach would be set a default maxlength in the input field and then change it's attribute in the checkbox event. The numeric value can then be tied to a CSS property.

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

you also have to crop the text if you're downsizing to a shorter length.

reference: Can I specify maxlength in css?

Answer 2

This is not possible using CSS. Just add the maxlength attribute to the input field via jQuery

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

Answer 3

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

}); 

Answer 4

You do that the same as you are doing the changes of styles:

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

Notice also how I replaced the selector #txtbxSSNOrITIN. That's a better and faster approach to select by id.

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

This is what happens if the checkbox isn't checked (just an example)

Don't forget to cut off the value entered by the user if the maxlength attribute gets contrained

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

That happens in the if block. Here your fiddle modified:

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

Answer 5

If you don't mind. Take my method : maxlength

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