Обнаружение значения текстового поля ввода после нажатия клавиши в текстовом поле?

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

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

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

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

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

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

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


javascript forms dom-events keydown
person rawrrrrrrrr    schedule 27.08.2009    source источник
comment
оповещение($(ввод#recomendar_producto_email).val());   -  person    schedule 01.09.2011

Ответы (6)


arrow_upward
18
arrow_downward

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

При запуске приведенного выше фрагмента попробуйте выполнить некоторые из следующих действий:

  • Ставим курсор в начало и пишем
  • Вставьте содержимое в середину текстового поля.
  • Выберите кучу текста и введите, чтобы заменить его
person kibibu    schedule 27.08.2009
comment
спасибо за решение, но, к сожалению, это не работает в случае, когда ввод выделен, а затем нажата клавиша. так, например, если корова выделена и вы нажимаете s, она предупреждает коров, когда она должна предупреждать s - person rawrrrrrrrr; 27.08.2009
comment
Обновлено, чтобы включить версию, которая работает, по крайней мере, в моем браузере. - person kibibu; 27.08.2009

arrow_upward
6
arrow_downward

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

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

arrow_upward
5
arrow_downward

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

person Elte Hupkes    schedule 24.03.2013

arrow_upward
0
arrow_downward

События keyup/down обрабатываются по-разному в разных браузерах. Простое решение состоит в том, чтобы использовать библиотеку, такую ​​как mootools, которая заставит их вести себя одинаково, справиться с распространением и всплытием и даст вам стандартное «это» в обратном вызове.

person Jeff Ober    schedule 27.08.2009

arrow_upward
0
arrow_downward

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

person Razor    schedule 27.08.2009

arrow_upward
-2
arrow_downward

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

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

fieldText.on('keydown', function() {
   fieldVal.val();
});
person Chadillac    schedule 04.01.2018