OnKeyPress Vs. onKeyUp и onKeyDown

Ответ 1

Проверьте здесь для архивной ссылки, первоначально использованной в этом ответе.

По этой ссылке:

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

Ответ 2

KeyPress, KeyUp и KeyDown аналогичны соответственно: Click, MouseUp, и MouseDown.

1. Down случается первый
2. Press происходит второй (при вводе текста)
3. Up происходит последним (когда ввод текста завершен).

Исключением является webkit, в котором есть дополнительное событие:

keydown
keypress
textInput     
keyup

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

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

Ответ 3

Большинство ответов здесь больше посвящены теории, чем практическим вопросам, и есть некоторые большие различия между keyup и keypress, поскольку она относится к значениям входных полей, по крайней мере, в Firefox (проверено в 43).

Если пользователь вводит 1 в пустой элемент ввода:

• Значение входного элемента будет пустой строкой (старое значение) внутри обработчика keypress

• Значение входного элемента будет 1 (новое значение) внутри обработчика keyup.

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

Сценарий:

• Пользователь вводит 12345 во входной элемент.
• Пользователь выбирает текст 12345.
• Пользователь вводит букву A.

Когда событие keypress запускается после ввода буквы A, текстовое поле теперь содержит только букву A.

Но:

• Field.val() - 12345.
• $Field.val(). length is 5
• Выбор пользователя - пустая строка (не позволяющая определить, что было удалено путем перезаписи выделения).

Так кажется, что браузер (Firefox 43) стирает пользовательский выбор, затем запускает событие keypress, затем обновляет содержимое полей, затем запускает keyup.

Ответ 4

onkeydown запускается, когда клавиша опущена (например, в ярлыках, например, в Ctrl+A, Ctrl удерживается "вниз".

onkeyup запускается при отпускании ключа (включая ключи модификатора /etc )

onkeypress запускается как комбинация onkeydown и onkeyup, или в зависимости от повторения клавиатуры (когда onkeyup не запускается). (это повторяющееся поведение - это то, что я не тестировал. Если вы проверите тест, добавьте комментарий!)

textInput (только webkit) запускается, когда вводится какой-либо текст (например, Shift+A вводит верхний регистр "A", но Ctrl+A будет выбирать текст и не вводить никакого ввода текста. В этом случае все другие события увольняются)

Ответ 5

Кажется, что onkeypress и onkeydown делают одно и то же (с небольшой разницей сочетаний клавиш, уже упомянутой выше).

Вы можете попробовать это:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

И вы увидите, что события onkeypress и onkeydown запускаются, пока нажата клавиша, а не когда нажата клавиша.

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

Ответ 6

Во-первых, они имеют разное значение: они стреляют

• KeyDown - когда клавиша была нажата
• KeyUp - когда была отпущена нажатая кнопка, и после обновления значения input/textarea (единственное из них)
• KeyPress - между ними и вовсе не означает, что клавиша была нажата и отпущена (см. Ниже).

Во-вторых, некоторые ключи запускают некоторые из этих событий и не запускают другие. Например,

• KeyPress игнорирует delete, стрелки, PgUp/PgDn, home/end, ctrl, alt, shift и т.д., В то время как KeyDown и KeyUp этого не делают (см. Подробности о esc ниже);
• когда вы переключаете окно с помощью alt + tab в Windows, срабатывает только KeyDown для alt, потому что переключение окна происходит до любого другого события (и KeyDown для tab предотвращается системой, я полагаю, по крайней мере, в Chrome 71).

Кроме того, вы должны иметь в виду, что event.keyCode (и event.which) обычно имеют одинаковое значение для KeyDown и KeyUp, но разное для KeyPress. Попробуйте игровую площадку, которую я создал. Кстати, я заметил довольно странную причину: в Chrome, когда я нажимаю ctrl + a и input/textarea пуст, для KeyPress срабатывает с event.keyCode (и event.which) равным 1 ! (когда вход не пустой, он не срабатывает вообще).

Напоследок немного прагматики:

• Для обработки стрелок вам, вероятно, потребуется использовать onKeyDown: если пользователь держит ↓, KeyDown срабатывает несколько раз (в то время как KeyUp срабатывает только один раз, когда они отпускают кнопку). Кроме того, в некоторых случаях вы можете легко предотвратить распространение KeyDown, но не можете (или не можете так просто) предотвратить распространение KeyUp (например, если вы хотите отправить при вводе без добавления новой строки в текстовое поле).
• Удивительно, что когда вы держите клавишу, скажем, в textarea, KeyPress и KeyDown срабатывают несколько раз (Chrome 71), я бы использовал KeyDown, если мне нужно событие, которое запускается несколько раз, и KeyUp для отпускания одного ключа.
• KeyDown обычно лучше для игр, когда вы должны обеспечить лучшую реакцию на их действия.
• esc обычно обрабатывается с помощью KeyDown: KeyPress не срабатывает, а KeyUp ведет себя по-разному для input и textarea в разных браузерах (в основном из-за потери фокуса)
• Если вы хотите настроить высоту текстовой области в соответствии с содержимым, вы, вероятно, не будете использовать onKeyDown, а скорее onKeyPress (PS хорошо, на самом деле лучше использовать onChange для этого случая).

Я использовал все 3 в своем проекте, но, к сожалению, возможно, забыл некоторые прагматики. (следует отметить: там также input и change событий)

Ответ 7

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

Он хорошо объясняет все ключевые события браузера,

Событие нажатия клавиши происходит при нажатии клавиши, за которым сразу же следует событие нажатия клавиши. Затем событие keyup генерируется при отпускании ключа.

Чтобы понять разницу между нажатиями клавиш и клавишами, полезно различать символы и клавиши. Ключ - это физическая кнопка на клавиатуре компьютера. Символ является символом набран нажатием кнопки. На клавиатуре США нажатие клавиши 4 при удерживании клавиши Shift обычно приводит к появлению символа "знак доллара". Это не обязательно так на каждой клавиатуре в мире. Теоретически, события нажатия клавиш и нажатия клавиш представляют собой нажатие или отпускание клавиш, в то время как событие нажатия клавиш представляет вводимый символ. На практике это не всегда так, как это реализовано.

Некоторое время некоторые браузеры запускали дополнительное событие, называемое textInput, сразу после нажатия клавиши. Ранние версии стандарта DOM 3 задумывали это как замену события нажатия клавиши, но позже это понятие было отменено. Webkit поддерживал это между версиями 525 и 533, и мне сказали, что IE поддерживал это, но я никогда не обнаруживал этого, возможно, потому что Webkit требовал, чтобы он назывался textInput, в то время как IE называл его textinput.

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

Ответ 8

Событие onkeypress работает для всех ключей, кроме ALT, CTRL, SHIFT, ESC во всех браузерах, где событие onkeydown работает для всех ключей. Средство onkeydown захватывает все ключи.

Ответ 9

Просто хотел поделиться любопытством

при использовании события onkeydown для активации метода JS код для этого события НЕ совпадает с тем, который вы получаете с помощью onkeypress!

Например, цифровые клавиши будут возвращать те же коды, что и цифровые клавиши над буквенными клавишами при использовании onkeypress, но НЕ при использовании onkeydown!

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

Демонстрация: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

и да. Я знаю, что определения методов разные... но очень запутанно то, что в обоих методах результат события извлекается с использованием event.keyCode... но они не возвращают одно и то же значение... не очень декларативная реализация.

Ответ 10

В принципе, эти события действуют по-разному в разных типах браузеров и версиях, я создал небольшой тест jsBin, и вы можете проверить консоль, чтобы узнать, как это поведение событий для вашей целевой среды, надеюсь эта помощь. http://jsbin.com/zipivadu/10/edit

Ответ 11

Несколько практических фактов, которые могут быть полезны, чтобы решить, какое событие обрабатывать (запустите скрипт ниже и сфокусируйтесь на окне ввода):

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

Ответ 12

KeyDown - когда вы физически нажимаете клавишу

KeyUp - когда вы физически отпускаете ключ

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