Лучший способ отследить onchange по мере ввода в тип ввода = текст?

Question

По моему опыту, событие input type="text" onchange обычно происходит только после того, как вы покинете (blur) элемент управления.

Есть ли способ заставить браузер запускать onchange каждый раз, когда textfield меняется содержимое? Если нет, то какой самый элегантный способ отследить это «вручную»?

Использование onkey* событий не является надежным, поскольку вы можете щелкнуть правой кнопкой мыши поле и выбрать Вставить, и это изменит поле без ввода с клавиатуры.

Является ли setTimeout единственным способом? .. Гадкий: -)

Answer 1

В эти дни слушайте oninput. Похоже на onchange без необходимости терять фокус на элементе. Это HTML5.

Поддерживается всеми (даже мобильными), кроме IE8 и ниже. Для IE добавьте onpropertychange. Я использую это так:

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough

<input id="source" />
<div id="result"></div>

Answer 2

Обновление:

См. Другой ответ (2015).

---

Оригинал 2009 Ответ:

Итак, вы хотите, чтобы событие onchange срабатывало при нажатии клавиш, размытии, и вставке? Это волшебство.

Если вы хотите отслеживать изменения по мере их ввода, используйте "onkeydown". Если вам нужно перехватить операции вставки с помощью мыши, используйте "onpaste" ( IE , FF3 ) и "oninput" ( FF, Opera, Chrome, Safari ¹ ).

¹ _{Сломано для <textarea> в Safari. Используйте textInput вместо}

Answer 3

Ниже код отлично работает для меня с Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Answer 4

Javascript здесь непредсказуем и забавен.

• onchange происходит только при размытии текстового поля
• onkeyup & onkeypress не всегда происходит при изменении текста
• onkeydown происходит при изменении текста (но не может отслеживать вырезать и вставлять щелчком мыши)
• onpaste & oncut происходит при нажатии клавиш и даже при щелчке правой кнопкой мыши.

Итак, чтобы отслеживать изменения в текстовом поле, нам нужны onkeydown, oncut и onpaste. При обратном вызове этого события, если вы проверите значение текстового поля, вы не получите обновленное значение, так как значение изменяется после обратного вызова. Таким образом, решение для этого состоит в том, чтобы установить функцию тайм-аута с тайм-аутом 50 миллисекунд (или может быть меньше), чтобы отслеживать изменения.

Это грязный хак, но это единственный способ, как я исследовал.

Вот пример. http://jsfiddle.net/2BfGC/12/

Answer 5

onkeyup происходит после того, как вы наберете, например, я нажимаю t, когда я поднимаю палец, действие происходит, но на keydown действие происходит, прежде чем я наберу символ t

Надеюсь, это кому-нибудь пригодится.

Так что onkeyup лучше, когда вы хотите отправить то, что вы только что набрали.

Answer 6

Если вы используете ТОЛЬКО Internet Explorer, вы можете использовать это:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Надеюсь, это поможет.

Answer 7

У меня было похожее требование (текстовое поле в стиле твиттера). Используется onkeyup и onchange. onchange фактически выполняет операции вставки мыши во время потери фокуса с поля.

[Update] В HTML5 или новее используйте oninput, чтобы получать обновления модификации символов в реальном времени, как объяснено в других ответах выше.

Answer 8

Я думаю, что в 2018 году лучше использовать событие input.

-

Как описывает спецификация WHATWG (https://html.spec.whatwg.org/multipage/indices.html#event-input-input):

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

-

Вот пример того, как его использовать:

<input type="text" oninput="handleValueChange()">

Answer 9

«вход» работал на меня.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

Answer 10

Пожалуйста, оцените следующий подход, используя JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});