Как я могу получить jquery .val () ПОСЛЕ события нажатия клавиши?

101

Я получил:

$(someTextInputField).keypress(function() {
  alert($(this).val());
});

Теперь предупреждение всегда возвращает значение ПЕРЕД нажатием клавиши (например, поле пусто, я набираю «a», а предупреждение дает мне «». Затем я набираю «b», и в предупреждении отображается «a» ...). Но мне нужно значение ПОСЛЕ нажатия клавиши - как я могу это сделать?

Справочная информация: я хотел бы включить кнопку, как только текстовое поле будет содержать хотя бы один символ. Поэтому я запускаю этот тест при каждом нажатии клавиши, но при использовании возвращаемого val () результат всегда на шаг отстает. Использование события change () для меня не вариант, потому что тогда кнопка будет отключена, пока вы не покинете текстовое поле. Если есть лучший способ сделать это, я рад это слышать!

Йорг Бреннинкмайер
источник
Должна ли кнопка снова стать неактивной после удаления текста? Если это так, вам, вероятно, придется придерживаться нажатия клавиш.
Brilliand

Ответы:

152

Изменить keypressна keyup:

$(someTextInputField).on("keyup", function() {
  alert($(this).val());
});

keypressсрабатывает при нажатии клавиши, keyupсрабатывает при отпускании клавиши.

Ура, я помогаю
источник
@Brilliand Ты прав. Я сделал обходной путь, он опубликован ниже.
Дэвид Оливерос
7
как вы это делаете на устройствах iPhone / Android? Они не поддерживают функцию клавиатуры.
Merijn Den Houting,
4
определение нажатия клавиш не совсем правильное. это определение keydown. см. quirksmode.org/dom/events/keys.html
challet
59

Удивлен, что никто не упомянул событие js "input":

$(someTextInputField).on('input', function() {
  alert($(this).val());
});

Рекомендуемые.

https://developer.mozilla.org/en-US/docs/Web/Events/input

Биллиноа
источник
8
Вау, это ответ на несколько вопросов SO, на которые нет ответов / нет ответов.
Ben Racicot
4
Это также замечательно, когда вам нужно игнорировать нажатие клавиш со стрелками, сдвиг и т. Д. В поле ввода.
hovado
2
caniuse.com/#search=input Относительно хорошая поддержка браузеров. Намного лучший ответ, чем прослушивание каждой клавиши.
Джеймс Хауг
1
Это спасает мне день! Спасибо. Я использовал следующий код: $ ('. Subject_mark'). On ("input", function () {var $ th = $ (this); $ th.val ($ th.val (). Replace (/ [^ 0-9] / g, function (str) {return '';}));
arsho 05
5

В качестве альтернативы вы можете использовать событие keydown с таймаутом 0.

Таким образом, изменения будут применены мгновенно, вместо того, чтобы применяться, когда пользователь перестанет удерживать клавишу.

$(someTextInputField).on("keydown", function() {
  setTimeout(function($elem){
    alert($elem.val());
  }, 0, $(this));
});
Дэвид Оливерос
источник
Это по-прежнему будет вести себя странно в случае удерживания Backspace ... возможно, нажатие клавиши с таймаутом 0?
Brilliand
Ах, неважно, OP не указывает, что должно произойти, если текстовое поле очищено.
Brilliand
4

Возможно, вы захотите подключить onchangeобработчик событий вместо использования каких-либо ключевых событий.

$(someTextInputField).change(function() {
    alert($(this).val());
});

Использование Edit > Pasteили щелчок правой кнопкой мыши затем «Вставить» вызовет событие изменения, но не ключевое событие. Обратите внимание, что некоторые браузеры могут имитировать ключевое событие при вставке (хотя я не знаю ни одного), но вы не можете рассчитывать на такое поведение.

Стивен П.
источник
4

Попробуйте что-то вроде этого:

$('#someField').keypress(function() {
  setTimeout(function() {
    if ($('#someField').val().length > 0)
      $('#theButton').attr('disabled', false);
  }, 1);
});

Это просто вводит тайм-аут, так что после завершения цикла событий «нажатие клавиши» ваш код будет запускаться почти сразу после этого. Такой короткий интервал таймера (даже если браузер округляет его в большую сторону) не будет заметен.

edit - или вы можете использовать «keyup», как говорят все, хотя его семантика отличается.

Заостренный
источник
Это не вопрос benig умный . Событие keyup не дает того же результата. Вы получаете отдельные события для shift, ctrl и т. Д. С помощью клавиатуры - если вы хотите получить фактический набираемый символ (например, амперсанд), а не серию ключевых событий, которые вы должны проверить состояние клавиш shift или ctrl, нажмите клавишу это путь.
Ripside 05
1
Правильно; это то, что я имел в виду, говоря «это другая семантика».
Pointy