Обнаружение изменения ввода в jQuery?

Ответ 1

ОБНОВЛЕНО для пояснения и примера

Примеры: http://jsfiddle.net/pxfunc/5kpeJ/

Метод 1. input событие

В современных браузерах используйте событие input. Это событие срабатывает, когда пользователь вводит текстовое поле, вставляет, отменяет, в основном в любое время, когда значение изменяется от одного значения к другому.

В jQuery сделайте так:

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

начиная с jQuery 1.7, замените bind на on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

Метод 2. keyup событие

Для более старых браузеров используйте событие keyup (это срабатывает после того, как клавиша на клавиатуре будет выпущена, это событие может дать своего рода ложный положительный результат, так как при освобождении "w" изменяется входное значение, а значение keyup события, но также когда клавиша "shift" отпускается, событие keyup срабатывает, но никаких изменений не было внесено на вход.). Также этот метод не срабатывает, если пользователь щелкает правой кнопкой мыши и вставляет из контекстного меню:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

Метод 3. Таймер (setInterval или setTimeout)

Чтобы обойти ограничения keyup, вы можете установить таймер, чтобы периодически проверять значение входа для определения изменения значения. Вы можете использовать setInterval или setTimeout для выполнения этой проверки таймера. См. Отмеченный ответ на этот вопрос SO: событие изменения текстового поля jQuery или посмотрите скрипт для рабочего примера, используя события focus и blur, чтобы запустить и остановить таймер для конкретного поля ввода

Ответ 2

Если у вас есть HTML5:

• oninput (срабатывает только тогда, когда происходит изменение, но делает это немедленно)

В противном случае вам нужно проверить все эти события, которые могут указывать на изменение значения входного элемента:

• onchange
• onkeyup ( не keydown или keypress, поскольку входное значение еще не будет иметь нового нажатия клавиши)
• onpaste (если поддерживается)

и возможно:

• onmouseup (я не уверен в этом)

Ответ 3

С HTML5 и без использования jQuery вы можете использовать событие input:

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

Это будет срабатывать при каждом изменении текста ввода.

Поддерживается в IE9 + и других браузерах.

Попробуйте жить в jsFiddle здесь.

Ответ 4

Как уже говорили другие, решение в вашем случае - sniff multiple events.
Плагины, выполняющие эту работу, часто прислушиваются к следующим событиям:

$input.on('change keydown keypress keyup mousedown click mouseup', handler);

Если вы считаете, что это может поместиться, вы можете добавить focus, blur и другие события.
Я предлагаю не превышать в событиях прослушивание, поскольку он загружает в памяти браузера дальнейшие процедуры для выполнения в соответствии с поведением пользователя.

Внимание: обратите внимание, что изменение значения входного элемента с помощью JavaScript (например, с помощью метода jQuery .val()) не приведет к срабатыванию любого из вышеперечисленных событий.
(Ссылка: https://api.jquery.com/change/).

Ответ 5

Если вы хотите, чтобы событие было запущено, когда что-то изменилось внутри элемента, вы можете использовать событие keyup.

Ответ 6

Есть события jQuery, такие как keyup и keypress, которые вы можете использовать с помощью элементов ввода HTML. Вы также можете использовать событие blur().

Ответ 7

//.blur запускается, когда элемент теряет фокус

$('#target').blur(function() {
  alert($(this).val());
});

//Для запуска вручную используйте:

$('#target').blur();

Ответ 8

Это относится ко всем изменениям ввода с использованием jQuery 1.7 и выше:

$(".inputElement").on("input", null, null, callbackFunction);