Home > Developer > JavaScript
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, but also triggers the onclick of the submit button, the excitation sequence is onclick → form onsubmit of the submit button.
<Html dir = "ltr" lang = "zh-CN"> <pead> <meta charset = "gb2312"/> <meta http-equiv = "X-UA-Compatible" content = "IE = Edge"> <title> Keyboard Events </title> </pead> <body> Keyboard Events </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
However, not only the submit button will trigger the form submit event, but also the above summary is as follows:
1. If there is a type = "submit" button in the form, the Enter key takes effect.
2. If there is only one input of type = "text" in the form, no matter what type the button is, the Enter key takes effect.
3. If the button does not use input, but a button, and no type is added, the default value is type = button in IE, and the default value of FX is type = submit.
4. Other form elements such as textarea and select do not affect the trigger rules. radio checkbox does not affect the trigger rules. However, in FX, the Return key is returned and the response is not returned in IE.
5. type = "image" input. The effect is equivalent to type = "submit ". I don't know why such a type is designed. It is not recommended to use it. It is appropriate to use CSS to add a background image.
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> <ptml dir = "ltr" lang = "zh-CN"> <pead> <meta charset = "gb2312"/> <meta http-equiv = "X-UA -Compatible "content =" IE = Edge "> <title> Keyboard Events </title> <style type =" text/css "> td {text-align: center ;}</style> </pead> <body> Keyboard Events </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
We can use the following script to listen to Keyboard Events on the webpage. Once you press Enter, the events you bind will start.
Copy codeThe Code is as follows:
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 the document
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 |
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
