Какое событие происходит при попытке превысить максимально кол-во символов у textarea?

Question

[A_Psycho]

Здравствуйте.
Делаю счетчик символов для textarea. Если введено 200+ символов - счетчик становится оранжевый, 250+ счетчик становится красным. Хочу сделать анимацию формы для момента, когда пользователь пытается ввести 251-ый символ. Есть ли такое событие у стандартных форм html? Или, возможно, это можно решить путем jQuery? Ограничение установлено в атрибуте тега.

<textarea id="orderTextarea" class="text-field" maxlength="250"></textarea>

В нижеприведенном коде я установил alert(); на событие нажатия кнопки после достижения 250 символов. Проблема в том, что это событие срабатывает даже тогда, когда пользователь нажимает backspace, пытаясь удалить сообщение. Нужно отловить непосредственно попытку вводу 251-го символа.

$(function() {
    $('#orderTextarea').keyup(function count(){
        number = $("#orderTextarea").val().length;
        $('.count > .now').html(number);
        if (number >= 250) {
            $('.count').css('color', 'red');
            $('#orderTextarea').keyup(function(){
                alert('hello');
            });
        } else if (number >= 200) {
            $('.count').css('color', 'orange');
        } else {
            $('.count').css('color', 'white');
        }
    });
});

Пробовать JS и JQuery стал совсем недавно, поэтому прошу не кидаться тухлыми помидорами. Никакой литературы, кроме оф. справочника JQuery я не имею.
Заранее спасибо за помощь и за понимание!

Answer 1

[Максим Ходырев]

Такого события нет в javascript.

$(function() {
    $('#orderTextarea').keypress(function(event){
        var number = $(this).val().length,
            counter = $('.count'),
            color = 'white';

        counter.find('>.now').html(number);
        if (number >= $(this).attr('maxlength')) {
            color = 'red';
        } else if (number >= 200) {
            color = 'orange';
        }

        counter.css('color', color);
    });
});

Событие Keypress в отличие от Keyup, Keydown не реагирует на спецсимволы.

Comments

[A_Psycho]

Ваш код сломал счетчик, но keypress(); работает так, как мне надо. Большое спасибо.

[Максим Ходырев]

@A_Psycho не за что, код по сути ваш же, просто отрефакторил чутка. Все что я хотел этим сказать это "Старайтесь не дублировать селекторы в коде и хардкодить значения".

[A_Psycho]

@maximkou спасибо, впереди еще много времени обучения. Насчет счетчика - $('#orderTextarea').keypress(); не считывал нажатия спец. символов и, как следствие, не перезаписывал значение переменной number в .now

Answer 2

[Александр Борисович]

всегда кто-то уже спрашивал это)
stackoverflow.com/questions/7165273/counting-input...

stackoverflow.com/questions/1704772/jquery-count-n...

Answer 3

[Олег Краснов]

Иногда попадаются и готовые решения jQuery Character Counter Plugin )

Comments

[A_Psycho]

Изобретать велосипед не всегда плохо

[Олег Краснов]

Если вы только познаёте js и решили изучать его с помощью своих велосипедов, то вам только плюс в карму!