Изменение значения текстового поля?

Question

[Денис]

Здравствуйте. Как можно реализовать функцию изменения значения текстового поля, так сказать в реальном времени. Например, событие change срабатывает, когда мы ввели, что-то в текстовое поле и кликнули по другой области, то есть фокус поменялся. А мне хотелось бы отлавливать событие при каждом введенном символе. Например, если все символы удалены, то есть поле пустое, то добавляется класс error, и соответственно при хотя бы одном введенном символе, чтобы этот класс удалялся.

Answer 1

[lega]

Для этого есть событие "input"

Например, если все символы удалены, то есть поле пустое, то добавляется класс error, и соответственно при хотя бы одном введенном символе, чтобы этот класс удалялся.

Пример: jsfiddle.net/lega911/oquhqyvs
или 2-х сторонний биндинг jsfiddle.net/lega911/wa0z1Lj4

инфо тут: https://habrahabr.ru/post/272125/

Comments

[Денис]

А оно кажется некорректно работает в ИЕ 9

[lega]

Денис: Похоже на то, IE9 не отлавливает удаление символов https://developer.mozilla.org/ru/docs/Web/Events/input

Тогда можно использовать "keyup" (или keypress), для keydown значение value будет еще не обновлено.

Answer 2

[Никита Баев]

Следите за событием onKeyDown в input.

Answer 3

[Дмитрий Кравченко]

$inputField.on('input', function(){
  //your code
})

Answer 4

[Денис]

А почему тогда не keypress? оно же более универсальное.

Comments

[Александр Таратин]

Нет. Оно не сработает при вставке через контекстное меню или драге текста. В общем случае для ie9+ стоит одновременно отлавливать события input change и keypress (keypress - только для клавиш delete и backspace)