javascript - js get document title



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

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

События JavaScript

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

  • change

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

  • input

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

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

  • keydown

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

  • keypress

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

  • keyup

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

  • paste

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

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

Обратите внимание, что ctrlKey , shiftKey и altKey несут с собой информацию о ключах-модификаторах 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 с версии 5.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);
}

Рекомендации

https://ffff65535.com

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

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

Причина в следующем:

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

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

Таким образом, обработчик input событий, по-видимому, точно соответствует точному назначению, потому что при изменении ЛЮБОГО будет активирован обработчик событий input . Вот почему обработчик input событий может быть важным и полезным.

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

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

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





javascript-events