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

Question

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

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

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

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

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

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

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

Спасибо

Answer 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>

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

• Установите курсор в начале и введите
• Вставить некоторый контент в середине текстового поля
• Выберите пачку текста и введите его для замены

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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