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

Question

При использовании jquery .change на input событие будет вызываться только тогда, когда вход теряет фокус

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

Answer 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, но также и при «сдвиге»msgstr "клавиша отпущена, событие keyup срабатывает, но не было внесено никаких изменений во ввод.).Также этот метод не срабатывает, если пользователь щелкает правой кнопкой мыши и вставляет из контекстного меню:

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

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

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

Answer 2

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

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

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

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

и, возможно,

• onmouseup (я не уверен насчет этого)

Answer 3

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

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

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

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

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

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

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