OnKeyPress Vs. onKeyUp и onKeyDown

В чем разница между этими тремя событиями? Погуглив, я обнаружил, что:

• onKeyDownСобытие срабатывает , когда пользователь нажимает клавишу.
• onKeyUpСобытие срабатывает , когда пользователь отпускает клавишу.
• onKeyPressСобытие срабатывает , когда пресса и пользователь отпускает ключ ( с onKeyDownпоследующим onKeyUp).

Я понимаю первые два, но не onKeyPressтак onKeyUpли? Можно ли отпустить клавишу ( onKeyUp), не нажимая ее ( onKeyDown)?

Это немного сбивает с толку, может кто-нибудь прояснить это для меня?

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

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

В теории onKeyDownи onKeyUpсобытия представляют собой ключи нажаты или отпущены, в то время как onKeyPressсобытие представляет собой символ набираясь. Реализация теории не одинакова во всех браузерах.

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 );
}

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

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

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

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

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

Сценарий:

1. Пользователь вводит 12345в элемент ввода.
2. Пользователь выбирает текст 12345.
3. Пользователь печатает письмо A.

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

Но:

1. Field.val () есть 12345.
2. $ Field.val (). Длина 5
3. Выбор пользователя - пустая строка (вы не можете определить, что было удалено, перезаписав выбор).

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

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

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

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

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

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

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

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

• KeyPress игнорирует delete, стрелки, PgUp/ PgDn, home/ end, ctrl, alt, и shiftт.д. , а KeyDown и KeyUp не (см подробности о escниже);
• когда вы переключаете окно с помощью alt+ tabв Windows, altсрабатывает только KeyDown для запуска, потому что переключение окна происходит до любого другого события (и 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 ведет себя по-разному для inputs и textareas в разных браузерах (в основном из-за потери фокуса)
• Если вы хотите настроить высоту текстовой области для содержимого, вы, вероятно, не будете использовать onKeyDown, а скорее onKeyPress ( PS хорошо, на самом деле лучше использовать onChange для этого случая ).

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

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

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

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

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

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

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

Кажется, что 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 запускаются при нажатии клавиши, а не при нажатии клавиши.

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

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

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

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

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

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

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

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

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

Обновленный ответ:

KeyDown

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

Нажатие клавиши

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

KeyUp

• Срабатывает один раз в конце, когда вы отпускаете ключ.
• Запускает мета-ключ.

Это поведение в обоих addEventListenerи jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <- попробовать пример

(ответ был отредактирован с правильным ответом, скриншот и пример)

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

$('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/>

Нажатие кнопки:

• не вводящие / печатающие ключи (например Shift, Ctrl) не будут вызывать keypress. Нажмите Ctrlи отпустите:

  keydown 17 17 Контроль

  keyup 17 17 Control

• ключи от клавиатур, которые применяют преобразования символов к другим символам, могут привести к « мертвым» и дублирующим «ключам» (например ~, ´) keydown. Нажмите ´и отпустите, чтобы отобразить двойное ´´:

  Keydown 192 192 Dead

  keydown 192 192 ´´

  нажатие клавиши 180 180 ´

  нажатие клавиши 180 180 ´

  Keyup 192 192 Dead

Кроме того, ввод без ввода (например, ранжированный <input type="range">) будет по-прежнему запускать все события нажатия клавиш, нажатия клавиш и нажатия клавиш в соответствии с нажатыми клавишами.