Home > Developer > Web Develop
Original: http://blog.csdn.net/qq_21386275/article/details/67640576
There are some requirements, the input box on the HTML page allows only numbers to be entered, only decimals are allowed, and so on.
At this time, it is necessary to obtain the keyboard every time the key keycode, to determine which key to press (the number keys or the character key, or the combination of keys ), and then add our requirements corresponding to the processing logic.
----------------------------------------------------------------------------------------------------keycode Table1. Key values for letters and number keys (KeyCode)
| Key | Key Code | Key | Key Code | Key | Key Code | Key | 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 | 89 | 8 | 56 |
| I | 73 | R | 82 | 0 | 48 | 9 | 57 |
2. Key code value of key on numeric keypad
| Key | Key Code | Key | Key Code |
|---|---|---|---|
| 0 | 96 | 8 | 104 |
| 1 | 97 | 9 | 105 |
| 2 | 98 | * | 106 |
| 3 | 99 | + | 107 |
| 4 | 100 | Enter | 108 |
| 5 | 101 | - | 109 |
| 6 | 102 | . | 110 |
| 7 | 103 | / | 111 |
3. Key code value of function key
| Key | Key Code | Key | Key Code |
|---|---|---|---|
| F1 | 112 | F7 | 118 |
| F2 | 113 | F8 | 119 |
| F3 | 114 | F9 | 120 |
| F4 | 115 | F10 | 121 |
| F5 | 116 | F11 | 122 |
| F6 | 117 | F12 | 123 |
4. Key code value of the Control key (KeyCode)
| Key | Key Code | Key | Key Code | Key | Key Code | Key | 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 |
5, key code value of multimedia key (KeyCode)
| Key | Key Code |
|---|---|
| Volume Plus | 175 |
| Volume reduction | 174 |
| Stop it | 179 |
| Mute | 193 |
| Browser | 172 |
| 180 | |
| Search | 170 |
| Collection | 171 |
Scenario Description : Restricts the specified content input in the HTML input box, such as allowing only numbers to be entered (others are regular expression changes). There are many methods, such as the following code:
<! Doctype><html><head> <meta Charset= "UTF-8" ></head><body>< Input type= "text" onkeyup=< Span class= "Hljs-value" > ' This.value=this.value.replace (/[^\w_]/g, ""); /></BODY>
Code Defects : In the above code, the input box can only enter a number (this article is not to explain this), but the method has a flaw, when the user wants to modify the number, the key of the keyboard can not make the cursor to the left, even if the mouse click, so that the cursor to the specified location, when the keyboard is pressed any key changes , the cursor will still run to the far right end.
Solution and Principle : OnKeyUp In the code is the keyboard every time you press and release the value in the input box according to the regular processing, does not conform to the regular replacement of "", that is, to remove, the specific can see JS's replace function. Then the above code defects can be started from keycode. The code is as follows
<! Doctype><Html><head> < meta charset= "UTF-8" ></head>< Body><input type= "text" onkeyup= ' if (Event.keycode!=8 & & event.keycode!=37 && event.keycode!=16 && event.keycode!=20 && event.keycode!=39 & & (event.keycode<48 | | event.keycode>105) && (!event.shiftkey && event.keycode! = 189)) This.value=this.value.replace (/[^\w_]/g, ""); /></BODY> Code Description : The top event.keycode behind the number represents the keyboard corresponding to the key, you can view the KeyCode table above. The above code is pressed on the keyboard number keys, backspace keys, ←,→ button, do not do regular processing, thus avoiding the first paragraph of the code problem.
JS Monitor Combination buttonThe combination of buttons generally divided into the following two kinds:
Two-bit combination, such as: Ctrl (CMD) + other keys, ALT + other keys, shift+ other keys
Three-bit key combinations, such as: Ctrl (CMD) + SHIFT + other keys, CTRL (CMD) + ALT + other keys
In the key combination, JS has the following properties in the event: Ctrlkey (Metakey), Altkey, Shiftkey
The following is an example of pressing the SHIFT+1 key combination (other similar):
<! Doctype><Html><Head><Metacharset="UTF-8" ></head>< body><input type= "text" onkeyup= "test ()"/></body> <script> function test () {if (event.shiftkey && event.keycode = 49) {alert (1);}} </SCRIPT> code Description : After executing the above code, press the key combination shift+1 output in the input box! At the same time, the alert will be 1. But the individual in the test process has a question, is the combination of key shift+ other keys, JS How to distinguish between Chinese and English.
Expand ShortcutsShortcuts.js can add a combination of buttons to a Web page, making the combo button richer.
Specific usage, and more information, can be downloaded in the download link below, try it.
Dot me, shortcuts.js.
"Turn" keycode comparison table and JS Monitor combination button
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
