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

301

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

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

  • 3
    какой вид ввода? текстовое окно? Флажок? радио? текстовое поле? давайте посмотрим, что вы придумали до сих пор
  • 0
    Извините, это ввод текста типа. И, как я уже сказал, я попытался изменить, но это не так, как мне нужно (для каждого изменения в тексте во входных данных). Я также пробовал нажатие клавиш, но чтобы это работало, мне нужно следить за тем, является ли вход «грязным» или нет.
Показать ещё 1 комментарий
Теги:

8 ответов

465
Лучший ответ

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

Примеры: 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, чтобы запустить и остановить таймер для конкретного поля ввода

Поделиться
  • 0
    Не могли бы вы объяснить подробнее об этом решении? Как мне получить текущее значение? Как я могу заставить это работать только тогда, когда изменения внесены в текущее значение?
  • 0
    Я обновил пост, чтобы ответить на ваши вопросы
Показать ещё 13 комментариев
165

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

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

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

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

и возможно:

  • onmouseup (я не уверен в этом)
Поделиться
  • 16
    проголосовал за html5
  • 0
    к сожалению, не работает на входах флажок
Показать ещё 1 комментарий
74

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

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

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

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

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

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

Поделиться
8

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

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

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

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

Поделиться
  • 0
    я также рекомендую добавить фокус, чтобы избежать проблем с автозаполнением
  • 0
    Понимаю. Я искал, и кажется, что focusout поддерживается только IE и частично Chrome, я прав?
Показать ещё 2 комментария
2

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

Поделиться
  • 0
    Хорошо, но это не более или менее то же самое, что и клавиатура? Я должен буду проверить, является ли вход "грязным" сам?
  • 0
    @SnowJim, если вы хотите что-то делать только тогда, когда ввод действительно изменяется, вы должны либо использовать onchange , либо самостоятельно отслеживать состояние. keydown не работает, потому что он срабатывает до того, как состояние входа изменится.
Показать ещё 3 комментария
0

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

$(".inputElement").on("input", null, null, callbackFunction);
Поделиться
0

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

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

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

$('#target').blur();
Поделиться
  • 1
    .change, как я уже сказал, генерируется только тогда, когда inout теряет фокус и значение изменяется, мне нужно получить даже, как только ввод (текст) изменяется (как только текст на входе изменяется). Размытие срабатывает только тогда, когда вход теряет фокус.
0

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

Поделиться
  • 1
    .change, как я уже сказал, генерируется только тогда, когда inout теряет фокус и значение изменяется, мне нужно получить даже, как только ввод (текст) изменяется (как только текст на входе изменяется). Размытие срабатывает только тогда, когда вход теряет фокус.
  • 0
    @SnowJim .. Спасибо за исправление.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню