Как отслеживать событие onchange во время ввода для элемента input типа "text"?

Question

Заголовок: Как заставить событие onchange срабатывать при каждом изменении текста в input type="text"?

В моем опыте событие onchange для элемента <input type="text"> происходит обычно только после потери фокуса (blur). Возникает необходимость вызвать это событие каждый раз, когда содержимое текстового поля изменяется. Есть ли способ заставить браузер срабатывать событие onchange при каждом изменении текста? Если нет, то как можно отслеживать изменения "вручную" наилучшим образом?

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

Является ли setTimeout единственным возможным подходом для этой задачи?

Answer 1

Ваш код работает отлично с jQuery 1.8.3. Вот как выглядит ваш пример на русском языке:

HTML:

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

Javascript/jQuery:

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

Этот код добавляет обработчик событий для элементов с ID myId, который вызовет функцию doSomething() при изменении значения поля (события change), нажатии клавиш (событие keydown), вставке текста (событие paste) и вводе текста (событие input). Убедитесь, что функция doSomething() определена в вашем коде.

Answer 2

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

Событие onchange срабатывает только при потере фокуса у текстового поля.
События onkeyup и onkeypress не всегда фиксируют изменения текста.
Событие onkeydown срабатывает при изменении текста (но не может отследить вырезание и вставку с помощью правого клика мыши).
События onpaste и oncut срабатывают при нажатии клавиш и даже при использовании правого клика мыши.

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

Это, конечно, не самое чистое решение, но, как я исследовал, это единственный способ.

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

Answer 3

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

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

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

Answer 4

В вашем вопросе вы упомянули, что хотите использовать oninput вместо onchange, и предоставили пример кода. Давайте рассмотрим это с точки зрения вашего кода на HTML и JavaScript.

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

Ваш HTML и JavaScript код выглядит следующим образом:

<!-- index.html -->
<html>
  <head>
    <title>title here</title>
    <script src="index.js"></script>
  </head>
  <body>
    <input oninput="onclickhandler(this)"></input>
  </body>
</html>

// script.js
function onclickhandler(e) {
  console.log(e.value);
}

Объяснение

Использование oninput: Атрибут oninput в <input> теге вызывает функцию onclickhandler каждый раз, когда пользователь вводит данные в поле. Это позволяет вам реагировать на изменения в реальном времени.
Передача элемента: При вызове функции вы передаете контекст элемента this, что позволяет вам получить доступ к текущему значению введённого текста через e.value.
Логирование значения: В функции onclickhandler вы используете console.log(e.value) для вывода текущего значения поля ввода в консоль, что поможет вам отследить изменения.

Результат

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

Если вам нужна дополнительная помощь или примеры, не стесняйтесь задавать вопросы!

Answer 5

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

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

Как отслеживать событие onchange во время ввода для элемента input типа "text"?

5 ответ(ов)

Объяснение

Результат

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных