Для окна поиска автозаполнения JavaScript мы должны использовать обработчик событий "input"?

Я пытаюсь отличить различное использование событий keydown, keypress, keyup, input, change в JavaScript.

Если это окно поиска автозаполнения JavaScript, верно ли, что мы должны использовать обработчик событий input?

Причина такова:

  • обработчик события change не будет вызываться до тех пор, пока пользователь не нажмет клавишу Enter или не покинет это поле ввода (клавишей Tab или щелчком вне поля ввода), поэтому событие change не может соответствовать цель сделать предложение, когда пользователь вводит еще один символ в поле ввода.

  • Обработчик событий keydown может использоваться для "добавления" нажатия клавиши к поисковому запросу, но для CTRL-v или CMD-v (на Mac), чтобы вставить его, мы не можем получить keyCode один за другим, если мы вставим в окно поиска слово, такое как hello, потому что для CTRL и одного нажатия клавиши для v вместо hello будет только одно нажатие клавиши, но мы можем используйте атрибут ввода value для получения значения - однако, что, если пользователь использует мышь для правого клика и выбирает "вставить", чтобы добавить текст в поле - в этом случае мы должны или можем использовать обработчик события мыши, чтобы посмотреть на атрибут value? Это слишком грязно, чтобы иметь дело с таким низким уровнем клавиатуры и мыши.

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

Нам еще нужен обработчик событий keydown, потому что если пользователь нажимает клавишу со стрелкой вниз, чтобы перейти в список возможных элементов? (и, возможно, ESC, чтобы окно подсказки автозаполнения исчезло). В этих случаях обработчик события input и обработчик события change не будут вызываться, а событие keydown будет полезно для этих случаев.

Является ли приведенная выше концепция правильной, главным образом для понимания события input?

(jsfiddle для понимания того, какие вызовы обработчиков событий: http://jsfiddle.net/jYsjs/)

Ответы

Ответ 1

У вас это в основном правильное, вот подробный обзор событий и потенциальных случаев ввода.

События JavaScript

Это когда срабатывает другое событие:

  • change

    Это будет вызываться, когда событие blur запускается, если значение <input> было изменено. Другими словами, он будет срабатывать, когда вход теряет фокус, а значение отличается от того, что было.

  • input

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

    К сожалению, событие input является относительно новым и доступно только для современных браузеров (IE9 +).

  • keydown

    Событие keydown довольно просто, оно срабатывает, когда пользователь нажимает клавишу вниз.

  • keypress

    Событие keypress должно отображать набранный символ. Из-за этого он не захватывает backspace или delete, который немедленно отклоняет его для использования через keydown.

  • keyup

    Во многом как keydown, он запускается всякий раз, когда пользователь отпускает ключ.

  • paste

    Это удобное событие запускается, когда данные вставляются в элемент.

Клавиши-модификаторы

Обратите внимание, что keydown, keypress и keyup содержат информацию о ключах-модификаторах Ctrl, Shift и Alt в свойствах ctrlKey, shiftKey и altKey соответственно.

Случаи

Вот список случаев, которые вам необходимо рассмотреть:

  • Ввод ввода с клавиатурой (включая нажатие клавиши)

    Триггеры: keydown, keypress, input, keyup

  • Удаление ввода (Backspace/Delete)

    Триггеры: keydown, input, keyup

  • Вставка с использованием Ctrl + V

    Триггеры: keydown, paste, input, keyup

  • Использование мыши для вставки

    Триггеры: paste, input

  • Выберите элемент из автозаполнения (↑/↓)

    Триггеры: keydown, keyup

Реализация

Учитывая вышеизложенное, вы можете реализовать свой блок автозаполнения, обрабатывающий событие input для всех изменений ввода, а затем keydown для обработки вверх и вниз. Это действительно отлично разделило бы все и привело бы к довольно чистому коду.

Если вы хотите поддерживать IE8, вам нужно выбросить все, кроме вставки в событие keydown, а затем обработать paste. Событие paste довольно широко поддерживается сейчас и находится в IE с версии v5.5).

Экспериментирование с событиями

Вот jsFiddle, который я использовал для тестирования событий, вам может показаться полезным. Он показывает немного больше информации о каждом событии:

function logEvent(e) {
    console.log(e.type +
                "\n    this.value = '" + this.value + "'" +
                (e.keyCode ? "\n    e.keyCode  = '" + e.keyCode + "'" : "") +
                (e.keyCode ? "\n    char       = '" + String.fromCharCode(e.keyCode) + "'" : ""));
    console.log(e);
}

Ссылки