Home > Developer > Web Develop

JS KeyUp, KeyPress and KeyDown events

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

When a button is pressed or released in every modern browser, there can be three client-side events.

    1. KeyDown Event
    2. KeyPress Event
    3. KeyUp Event

The KeyDown event occurs when the keyboard key is pressed, and then the KeyPress event is triggered. the KeyUp event is triggered when the key is released.

Here are some examples of how these three events are used in the page:

<inputID= "Testkeyevent"name= "Testkeyevent"onKeyUp= "KeyUp ()" /><inputID= "Testkeyevent"name= "Testkeyevent"onkeypress= "KeyPress ()" /><inputID= "Testkeyevent"name= "Testkeyevent"onkeydown= "KeyDown ()" />

The corresponding JS function:

function KeyUp () {...} function keypress () {...} function KeyDown () {...}

Attention:

  2. 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.
  4. 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
  6. KeyDown and KeyUp can usually capture keyboards in addition to prscrn all keys (special keys for special keyboards are not discussed here)
  8. KeyPress can only capture a single character
  10. KeyDown and KeyUp can capture key combinations.
  12. KeyPress can capture the case of a single character
  14. The keyvalue of KeyDown and KeyUp for a single character capture is a value, that is, the case of a single character cannot be judged.
  16. The KeyPress does not differentiate between the numeric characters of the keypad and the main keyboard.
  18. KeyDown and KeyUp distinguish the numeric characters of the keypad and the main keyboard.
  20. where Prscrn keys KeyPress, KeyDown, and KeyUp are not captured.

  21. When using the keyboard, it is common to use a key combination function similar to Ctrl+shift+alt. How do we determine this?

    Through the KeyUp event can be handled (here to explain why not KeyDown, because in the decision KeyDown, CTRL, Shift and ALT belong to hold the state, and then add another key is not accurately capture the key combination, so use KeyDown Can not be accurately judged by the KeyUp event to determine)

    Here is a simple list of CTRL + other key combination judgment code:

    void Form3_keyup (object sender, KeyEventArgs e) {    if  (E.control)    {        MessageBox.Show ( "keyup:ctrl+" + e.keyvalue.tostring ());}    }

    JS in the example:

    <!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Headrunat= "Server"><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title></title>    <Scripttype= "Text/javascript">        functionTest () {alert (event.keycode); }    </Script></Head><Body>    <Div>    <inputtype= "text"onkeyup= "Test ()"/>    </Div></Body></HTML>


  23. Capturing PRSCRN Key Events

    The PRSCRN key event can be determined by means of a hook, and the hook can get any keyboard event.

Here are some of the keys on the keyboard that correspond to code: The following are some of the keys on the keyboard that correspond to code:

Keyboard keys The corresponding digital
Backspace 8
tab 9
Enter 13
Shift 16
Ctrl 17
Alt 18
Pause/break 19
Caps LOCK 20
Escape 27
Page UP 33
Space 32
Page Down 34
End 35
Home 36
Arrow Left 37
Arrow up 38
Arrow Right 39
Arrow Down 40
Insert 45
Delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
A 65
B 66
C 67
D 68
E 69
F 70
G 71
H 72
I 73
J 74
K 75
L 76
M 77
N 78
O 79
P 80
Q 81
R 82
S 83
T 84
U 85
V 86
W 87
X 88
Y 89
Z 90
Left window key 91
Right window key 92
Select key 93
Numpad 0 96
Numpad 1 97
Numpad 2 98
Numpad 3 99
Numpad 4 100
Numpad 5 101
Numpad 6 102
Numpad 7 103
Numpad 8 104
Numpad 9 105
Multiply 106
Add 107
Subtract 109
decimal point 110
Divide 111
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
h1~ 121
F1

JS KeyUp, KeyPress and KeyDown events

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
event keypress selenium keypress js search and replace node js and npm javascript keypress codes node js and angularjs tutorial deploy node js and mongodb

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More