Почему jQuery.change () срабатывает только когда я покидаю элемент?

Question

У меня есть элемент textarea, и я хочу напечатать количество написанных символов над textarea, когда я печатаю. HTML выглядит так:

<p id="counter"></p>
<textarea id="text"></textarea>

и JavaScript:

jQuery( "#text" ).change( function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});

Но счетчик «обновляется» только когда я щелкаю за пределами текстовой области. Это почему? Я хочу, чтобы счетчик обновлялся на лету во время записи.

Answer 1

это известное поведение события изменения.Он не срабатывает, пока элемент не потерял фокус. Из документов:

Событие изменения отправляется элементу при изменении его значения.Это событие ограничено элементами, ящиками и элементами.Для полей выбора, флажков и переключателей событие вызывается немедленно, когда пользователь делает выбор с помощью мыши, но для других типов элементов событие откладывается до тех пор, пока элемент не потеряет фокус.

Вместо этого я бы связал скрипт с keyup (вы могли бы использовать другие ключевые события, но в этом контексте наиболее целесообразно использовать up):

jQuery( "#text" ).keyup(function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});

Answer 2

try .on ('keyup') или .on ('keypress') или .on ('keydown')

Answer 3

Попробуйте использовать событие keyup вместо change . Смотрите это в действии: http://jsfiddle.net/ren4A/1/