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?

Roko C. Buljan · Accepted Answer · 2015-06-02T23:14:33.157

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

});

For whom the code compiles: I immortalized this already-immortalized exchange here: http://www.codeproject.com/Tips/997548/Manipulating-Controls-Page-Elements-in-Sharepoint — B. Clay Shannon-B. Crow Raven, Jun 03 '15 at 18:20
@B.ClayShannon wow! thanks for the mentions. Interesting and fancifully use of English! The `$=` stuff for getting generated ID will save souls. I'm sure about that. Just, in the *Code breakdown* part I miss a SO link and some explanations what the new code does, vs. the original one. Some words on the use of `data-*` attr. to store values and on Ternary (AKA Conditional) Operator (`condition?ifTrue:else`) and the actual *need* to operate with characters (which is currently a bit obfuscated I think) would shad some light. Thx again and keep writing! You're a natural-born talent! — Roko C. Buljan, Jun 03 '15 at 22:54
Most people hate my writing, as evidenced by the lack of Choctypi on my doorstep. — B. Clay Shannon-B. Crow Raven, Jun 04 '15 at 14:42
I updated the tip with your suggestions (added the missing link*, and some explanatory code about the "more better" version of the jQuery). * I would make a joke about the 'missing link' but, to quote Chuck Berry, that's too much monkey business for me to be involved in. — B. Clay Shannon-B. Crow Raven, Jun 04 '15 at 14:53

score 4 · Answer 2 · edited May 23 '17 at 10:28

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?

ZombieCode · Answer 3 · 2015-06-02T22:59:27.973

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

score 3 · Answer 4 · answered Jun 02 '15 at 22:41

3

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/

answered Jun 02 '15 at 22:41

user2755140

1,917
4
13
16

Re your conditional text question--don't just delete questions; answer it if it's self-answered. Also the question didn't include the error you were getting, leading to a lot of comments. – Dave Newton Jun 09 '15 at 16:53
I'd rather like to delete it. Thanks though :) – user2755140 Jun 09 '15 at 17:06

score 1 · Answer 5 · answered Apr 01 '16 at 09:09

1

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

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

answered Apr 01 '16 at 09:09

Wilf

2,297
5
38
82

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

5 Answers5

Linked