Обнаруживать "значение" входного текстового поля после события keydown в текстовом поле?

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

К сожалению, значение ввода не включает изменения, вызванные нажатием клавиши.

Например, для этого окна ввода:

<input onkeydown="alert(this.value)" type="text" value="cow" />

Значение по умолчанию - "корова". Когда вы нажимаете клавишу "s" на входе, вы получаете предупреждение ( "корова" ) вместо предупреждения ( "коровы" ). Как я могу сделать его предупреждением ( "коровы" ) без использования onkeyup? Я не хочу использовать onkeyup, потому что он чувствует себя менее отзывчивым.

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

У кого-то есть полное решение этой проблемы?

Спасибо

Ответы

Ответ 1

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

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

Минимальный пример:

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

Это устанавливает тайм-аут 1 мс, который должен произойти после того, как обработчики нажатия клавиш и клавиш управления позволяют контроллеру изменить его значение. Если ваш монитор обновляется со скоростью 60 кадров в секунду, у вас есть 16 мс комнаты для маневра, пока он не отстает на 2 кадра.

Более полный пример (который не полагается на именованный доступ к объекту Window, будет выглядеть так:

var e = document.getElementById('e');
var out = document.getElementById('out');

e.addEventListener('input', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});
<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

Ответ 2

Обратите внимание, что в новых браузерах вы сможете использовать новое событие ввода "HTML5" (https://developer.mozilla.org/en-US/docs/DOM/window.oninput). Большинство браузеров, не использующих IE, долгое время поддерживали это событие (см. Таблицу совместимости в ссылке); для IE это версия > /9, к сожалению.

Ответ 3

события keyup/down обрабатываются по-разному в разных браузерах. Простым решением является использование библиотеки, такой как mootools, которая заставит их вести себя одинаково, иметь дело с распространением и пузырьками и дать вам стандартный "this" в обратном вызове.

Ответ 4

Насколько я знаю, вы не можете сделать это со стандартным контролем ввода, если вы не откажетесь от своего собственного.

Ответ 6

Пожалуйста, попробуйте использовать oninput событие. В отличие от onkeydown, onkeypress events это событие обновляет свойство управляющего значения.

<input id="txt1" value="cow" oninput="alert(this.value);" />

Ответ 7

JQuery - оптимальный способ сделать это. Пожалуйста, обратитесь к нижеследующему:

let fieldText = $('#id');
let fieldVal = fieldText.val();

fieldText.on('keydown', function() {
   fieldVal.val();
});