in form, the submit shortcut is enter, and the reset shortcut is ESC. However, in IE6, safari4, ff3.5, opera10, and chrome , pressing enter not only triggers the form submit event, at the same time, The onclick of the submit button is also triggered, and The onclick order of the submit button is the onsubmit of the form.
<Textarea rows = "10" id = "runcode1" style = "width: 75%; "> <HTML dir =" LTR "lang =" ZH-CN "> <br/> <pead> <br/> <meta charset =" UTF-8 "/> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = edge"> <br/> <title> Keyboard Events </title> </P> <p> </pead> <br/> <body> <br/> <p> Keyboard Events </p> </P> <p> <form onsubmit = "alert ('form is submiting '); return false; "> <br/> <p> <input type =" text "value =" Focus on the text field, then press ENTER or ESC key "/> </P> <br/> <p> <input type =" Submit "onclick =" alert ('submit button is clicked '); "value =" Submit "/> <br/> <input type =" reset "onclick =" alert ('reset button is clicked '); "value =" reset "/> <br/> </P> <br/> </form> <br/> </body> <br/> </ptml> <br/> </textarea>RunCode
However, not only the submit button will trigger the form submit event, but also the above summary is as follows:
In addition to binding a keyboard event to a button, the browser also has an accesskey attribute to specify the link shortcut key. Note: If the accesskey is set to the same as that of the browser, the access key takes precedence over the menu. In ie, the shortcut key is the key value set by Alt +, and FF is the key value set by Alt + Shift +. In ie, the accesskey of element a only transfers the focus to the link. It is not equivalent to a click. In ff, it is equivalent to a click. In contrast, the accesskey Effect of input type = checkbox is clicked in IE or ff. In addition, we can also use label labels to enhance semantics, which is highly recommended by individuals.
The rest requires programming. Javascript events mainly capture keyboard events through the following three events: onkeydown, onkeypress, and onkeyup. The execution sequence of the three events is as follows: onkeydown-> onkeypress-> onkeyup. Generally, three keyboard events can be used to effectively respond to keyboard input. In actual use, we will find that these differences are different.
The onkeypress event cannot properly respond to system function keys (for example, back-up or deletion, but cannot effectively respond to Chinese Input Methods). Both onkeydown and onkeyup can effectively intercept system function keys, however, you can select different Keyboard Events based on the actual situation.
Because onkeypress cannot capture system function keys. the keycode attribute of the event object is different from the keycode attribute obtained in the onkeyup and onkeyup Keyboard Events, mainly because the keycode of the onkeypress event is case sensitive to letters, while the onkeydown and onkeyup events are not sensitive; the keycode of the onkeypress event cannot distinguish between the number keys on the primary key disk and the number keys on the secondary keyboard. the keycode of onkeydown and onkeyup is sensitive to the number keys on the primary and secondary keyboards.
<! Doctype HTML> <br/> <HTML dir = "LTR" lang = "ZH-CN"> <br/> <pead> <br/> <meta charset = "UTF-8" /> <br/> <meta http-equiv = "X-UA-compatible" content = "Ie = edge"> <br/> <title> Keyboard Events </title> <br/> <style type = "text/CSS"> <br/> TD {<br/> text-align: center; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> window. onload = function () {<br/> document. onkeydown = showkeydown <br/> document. onkeyup = Showkeyup <br/> document. onkeypress = showkeypress <br/>}< br/> function showkeydown (EVT) {<br/> EVT = (EVT )? EVT: window. event <br/> document. getelementbyid ("presskeycode "). innerhtml = 0 <br/> document. getelementbyid ("upkeycode "). innerhtml = 0 <br/> document. getelementbyid ("presscharcode "). innerhtml = 0 <br/> document. getelementbyid ("upcharcode "). innerhtml = 0 <br/> restoremodifiers ("") <br/> restoremodifiers ("down") <br/> restoremodifiers ("up") <br/> document. getelementbyid ("downkeycode "). innerhtml = E Vt. keycode <br/> If (EVT. charcode) {<br/> document. getelementbyid ("downcharcode "). innerhtml = EVT. charcode <br/>}< br/> showmodifiers ("down", EVT) <br/>}< br/> function showkeyup (EVT) {<br/> EVT = (EVT )? EVT: window. event <br/> document. getelementbyid ("upkeycode "). innerhtml = EVT. keycode <br/> If (EVT. charcode) {<br/> document. getelementbyid ("upcharcode "). innerhtml = EVT. charcode <br/>}< br/> showmodifiers ("up", EVT) <br/> return false <br/>}< br/> function showkeypress (EVT) {<br/> EVT = (EVT )? EVT: window. event <br/> document. getelementbyid ("presskeycode "). innerhtml = EVT. keycode <br/> If (EVT. charcode) {<br/> document. getelementbyid ("presscharcode "). innerhtml = EVT. charcode <br/>}< br/> showmodifiers ("", EVT) <br/> return false <br/>}< br/> function showmodifiers (EXT, EVT) {<br/> restoremodifiers (EXT) <br/> If (EVT. shiftkey) {<br/> document. getelementbyid ("shift" + ext ). style. backgroundcolor = "# ff0000" <br/>}< br/> If (EVT. ctrlkey) {<br/> document. getelementbyid ("Ctrl" + ext ). style. backgroundcolor = "#00ff00" <br/>}< br/> If (EVT. altkey) {<br/> document. getelementbyid ("Alt" + ext ). style. backgroundcolor = "# 0000ff" <br/>}< br/> function restoremodifiers (EXT) {<br/> document. getelementbyid ("shift" + ext ). style. backgroundcolor = "# ffffff" <br/> document. getelementbyid ("Ctrl" + ext ). style. backgroundcolor = "# ffffff" <br/> document. getelementbyid ("Alt" + ext ). style. backgroundcolor = "# ffffff" <br/>}< br/> </SCRIPT> <br/> </pead> <br/> <body> <br/> <p> Keyboard Events </p> <br/> <form> <br/> <Table border = 1 cellpadding = "2" cellspacing = "0"> <br/> <tr> <br/> <TH> </Th> <br/> <TH> onkeydown </Th> <br/> <TH> onkeypress </Th> <br/> <TH> onkeyup </Th> <br/> </tr> <br/> <TH> key codes </Th> <br/> <TD id = "downkeycode"> 0 </TD> <br/> <TD id = "presskeycode"> 0 </TD> <br/> <TD id = "upkeycode "> 0 </TD> <br/> </tr> <br/> <TH> char codes (ie5/MAC; nn6) </Th> <br/> <TD id = "downcharcode"> 0 </TD> <br/> <TD id = "presscharcode"> 0 </TD> <br /> <TD id = "upcharcode"> 0 </TD> <br/> </tr> <br/> <TH rowspan = "3 "> modifier keys </Th> <br/> <TD> <span id =" shiftdown "> shift </span> </TD> <br/> <TD> <SPAN id = "shift"> shift </span> </TD> <br/> <TD> <span id = "shiftup"> shift </span> </TD> <br/> </tr> <br/> <TD> <span id = "ctrldown"> CTRL </span> </TD> <br/> <TD> <span id = "Ctrl"> CTRL </span> </TD> <br/> <TD> <span id = "ctrlup"> CTRL </span> </TD> <br/> </tr> <br/> <TD> <span id = "altdown"> alt </ span> </TD> <br/> <TD> <span id = "Alt"> alt </span> </TD> <br/> <TD> <span ID = "altup"> alt </span> </TD> <br/> </tr> <br/> </table> <br/> </form> <br /> </body> <br/> </ptml> <br/>Run code
We can use the following script to listen to Keyboard Events on the webpage. Once you press enter, the events you bind will start.
Function getkey (e) {e = E | window. event; var keycode = E. Which? E. which: E. keycode; If (keycode = 13 || keycode = 108) {// If you press enter, // set the event you want to bind here} // bind the keyup event to function listenkey () {If (document. addeventlistener) {document. addeventlistener ("keyup", getkey, false);} else if (document. attachevent) {document. attachevent ("onkeyup", getkey);} else {document. onkeyup = getkey ;}}
The keycode list of all buttons in the keyboard is attached.
| Key value for letters and numbers) | |||||||
|---|---|---|---|---|---|---|---|
| Buttons | Key code | Buttons | Key code | Buttons | Key code | Buttons | Key code |
| A | 65 | J | 74 | S | 83 | 1 | 49 |
| B | 66 | K | 75 | T | 84 | 2 | 50 |
| C | 67 | L | 76 | U | 85 | 3 | 51 |
| D | 68 | M | 77 | V | 86 | 4 | 52 |
| E | 69 | N | 78 | W | 87 | 5 | 53 |
| F | 70 | O | 79 | X | 88 | 6 | 54 |
| G | 71 | P | 80 | Y | 89 | 7 | 55 |
| H | 72 | Q | 81 | Z | 90 | 8 | 56 |
| I | 73 | R | 82 | 0 | 48 | 9 | 57 |
| Keycode) | Function key value (keycode) | ||||||
|---|---|---|---|---|---|---|---|
| Buttons | Key code | Buttons | Key code | Buttons | Key code | Buttons | Key code |
| 0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 |
| 1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 |
| 2 | 98 | * | 106 | F3 | 114 | F9 | 120 |
| 3 | 99 | + | 107 | F4 | 115 | F10 | 121 |
| 4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 |
| 5 | 101 | - | 109 | F6 | 117 | F12 | 123 |
| 6 | 102 | . | 110 | ||||
| 7 | 103 | / | 111 | ||||
| Key Value) | |||||||
|---|---|---|---|---|---|---|---|
| Buttons | Key code | Buttons | Key code | Buttons | Key code | Buttons | Key code |
| Backspace | 8 | ESC | 27 | Right arrow | 39 | -_ | 189 |
| Tab | 9 | Spacebar | 32 | Down Arrow | 40 | .> | 190 |
| Clear | 12 | Page up | 33 | Insert | 45 | /? | 191 |
| Enter | 13 | Page down | 34 | Delete | 46 | '~ | 192 |
| Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 |
| Control | 17 | Home | 36 | ;: | 186 | \ | | 220 |
| ALT | 18 | Left arrow | 37 | = + | 187 | ]} | 221 |
| Cape lock | 20 | Up Arrow | 38 | , < | 188 | '" | 222 |
In addition, we can also use event. altkey, event. ctrlkey, event. metakey (with Microsoft flag), event. shiftkey to determine whether the corresponding keys are pressed, because they all return a Boolean value.
Some useful links
Differences between keydown and other browsers in opera
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
