How can I limit the number of characters entered in HTML input using 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 the checkbox changes the width and color of the background in the text box.

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

But besides this, what I really need to do is to limit the number of characters that the user types in the text field, depending on whether the checkbox is checked. How can I do this, preferably using CSS, but if necessary jQuery?

Answer 1

jsFiddle

First set maxlengthas:<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
        });

}); 

- , i.e: 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");
    });

}); 

Answer 2

, CSS.

jquery/javascript , . CSS.

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

, .

: maxlength css?

Answer 3

CSS. maxlength 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 4

, :

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

Notice also how I replaced the selector #txtbxSSNOrITIN. This is the best and fastest approach for choosing by id.

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

This is what happens if the box is not checked (just an example)

Remember to cut off the value entered by the user if the maxlength attribute gets restrictions

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

This happens in the if block. Your fiddle is changed here:

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

Answer 5

If you do not mind. Take my method:maxlength

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