长度未返回正确的值

Question

I have the following code:

$(document).ready(function (e) {

    $('#input').keydown(function (e)
    {
        var inpData_lenght = $(this).val().length+1;
        var max_length     = 15;
        if (inpData_lenght >= max_length)
        {
            if (inpData_lenght > max_length)
            {
                if ((e.keyCode != 8) && (e.keyCode != 46))
                {
                    e.stopImmediatePropagation();
                    e.preventDefault();
                }
            }

            $(this).css({'background-color': '#ff8080'});
        }
        else
        {
            $(this).css('background-color', '');
        }  
    });
});

HTML:

<textarea id="input"></textarea>

(fiddle)

The textarea does not change the background back to white when there are max_length-1 characters but only on max_length-3 , is there any workaround? I am aware it has to do with the backspace or delete that is counting as character.

EDIT: I can only use keydown because that is the only key related callback the plugin supports.

Answer 1

It's better to use keyup() instead of keydown() because you will get the resulting input value. If the length exceeds maximum just replace the input value to the previous one. http://jsfiddle.net/9Ed8h/

$(document).ready(function (e) {

    $('#input').keyup(function (e)
    {
        var inpData_lenght = $(this).val().length;
        var max_length     = 15;
        if (inpData_lenght >= max_length)
        {
            if (inpData_lenght > max_length)
            {
                $(this).val(this.lastValue);
            }

            $(this).css({'background-color': '#ff8080'});
        }
        else
        {
            $(this).css('background-color', '');
        }  
        this.lastValue = $(this).val();
    });
});

Answer 2

Using keyup will solve your problem. You should think of a way to prevent people holding their key down. (If you hold a key for 2 seconds, your limit of 15 chars will be exceeded)

How to disable repetitive keydown in jQuery

Answer 3

Combine the maxlength and keyup should be the easiest way.

<textarea id="input" maxlength=3></textarea>

And

$(document).ready(function (e) {

    $('#input').keyup(function (e)
    {
        var inpData_lenght = $(this).val().length;
        var max_length     = 3;
        if (inpData_lenght >= max_length)
        {
            $(this).css({'background-color': '#ff8080'});
        }
        else
        {
            $(this).css('background-color', '');
        }  
    });
});

See the fiddle: http://jsfiddle.net/DEjgd/4/

Answer 4

If you need a workaround for keydown , the following should work:

var maxLength = 15;
var currLength = this.value.length;
if (e.keyCode == 8 || e.keyCode == 46) {
    var expectedLength = currLength - 1; // distinguish here!
} else {
    var expectedLength = currLength + 1;
    if (expectedLength > maxLength) {
         e.stopImmediatePropagation();
         e.preventDefault();
    }
}
if (expectedLength >= maxLength)  {
    $(this).css('background-color', '#ff8080');
} else {
    $(this).css('background-color', '');
}  

Answer 5

除了使用JavaScript条件之外，您还可以使用类似这样的内容

<textarea maxlength="15" id="input"/>