KeyUp, KeyPress, and KeyDown events in JavaScript

Source: Internet
Author: User

KeyUp, KeyPress, and KeyDown events are all about keyboard events

1. The KeyDown event is triggered when the key of the keyboard is pressed, and the KeyUp event is triggered when the key is released .
KeyDown, KeyPress event triggered in the text has not been tapped into the text box, if the text in the output text box in the KeyDown, KeyPress event, the text is triggered before the keyboard event, and the KeyUp event triggered when the entire keyboard event operation has been completed, Gets the text after the keyboard event is triggered

Note:
after the KeyDown is triggered, the keyup is not necessarily triggered, and when the KeyDown is pressed, the mouse is dragged and the KeyUp event is not triggered.
KeyPress is primarily used to capture numbers (note: symbols including shift+ numbers), letters (note: include capitalization), keypads, etc. except f1-12, SHIFT, Alt, Ctrl, Insert, Home, PgUp, Delete, End, PgDn, ScrollLock, Pause, NumLock, {Menu key}, {Start key}, and ANSI characters outside the arrow key
KeyPress can capture only a single character, capturing the case of a single character, without distinguishing between the numeric characters of the keypad and the main keyboard.
KeyDown and KeyUp can usually capture keyboards in addition to prscrn all keys
KeyDown and KeyUp can capture key combinations, and the keyvalue for a single character capture is a value, that is, the case of a single character cannot be judged, and the numeric characters of the keypad and the main keyboard are distinguished.
where Prscrn keys KeyPress, KeyDown, and KeyUp are not captured.

when using the keyboard, usually use the Ctrl+shift+alt similar key function, through the KeyUp event can be processed (here to explain why not KeyDown, because in the decision KeyDown, CTRL, SHIFT and ALT belong to the Press the state, and then add another key is not accurately capture the combination of keys, so use KeyDown is not accurate to determine, through the KeyUp event to determine)


2. Event Processing Flow
The browser default event cannot be blocked in the KeyUp event, because the default behavior of the browser is completed at KeyPress, and the text is entered in the text box (although it is not yet shown), this time whether it is preventdefault or return false, Cannot prevent the behavior of entering text in a text box, such as preventing text from being entered in a text box, which must be blocked when KeyDown or KeyPress
result is KeyDown, KeyPress event return false text box cannot enter text, return false in KeyUp event text box can enter text
    
Keyboard response events for text boxes add Textinpput to the trigger order: KeyDown, KeyPress->textinput, KeyUp
TextInput event is supported after DOM3, mainly used to replace the KeyPress, the main difference with KeyPress is to add support for Chinese input method, and one thing is that textinput can only be triggered in editable text area (such as input, TEXTAREA), while KeyPress is a trigger (such as a button) for any control that has the focus, the TextInput event support is not very good, currently only Safari, Chrome support

3.ctrl+ Combination decision code for other keys
     
backspace 8 left window
tab 9 right window
Enter Select Key
Shift
Ctrl Numpad 0
alt Numpad 1
Pause/break numpad 2 98
CAPS LOCK 3 Numpad
Escape Numpad 4
PAGE UP Numpad 5 101
Space Numpad 6 102
PAGE DOWN Numpad 103
End Numpad 8 104
Home Numpad 9
Arrow left Notoginseng
arrow up multiply 106
arrow Right, add 107
arrow down subtract 109
Insert Decimal Point
Delete Divide 111

0 F1
1 F2 113
2 F3
3 Wuyi f4
4 f5
5 f6 117
6 F7 118
7-F8 119
8 F9
9 F10 121

a
b
C
D -A
e
F
g
h
I
J
k
L
m
N +
o -
P
Q Bayi
R
s
T -A
u
v
W
x
y
Z


KeyUp, KeyPress, and KeyDown events in JavaScript

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.