JQuery provides a simple method to obtain Keyboard Events. jquery obtains the keyboard.

JQuery provides a simple method to obtain Keyboard Events. jquery obtains the keyboard.

This article describes jQuery's simple method of getting Keyboard Events. We will share this with you for your reference. The details are as follows:

1. When do we need to use keyboard events?

When we do web, we sometimes use Keyboard Events for a more humane design. For example, in the drop-down box of the input box, select the desired content through the keyboard's upper and lower keyboards, and in the google input box's drop-down prompt. When we browse the album, we can view the photos through the left and right keys on the keyboard. When we browse novels and scroll with the mouse, it is easy to know which line to see. We can flip pages through the keyboard up and down keys. These small details are also very important. To a large extent, the website is processed in detail.

Ii. Types of jquery keyboard Functions

1. The keydown event is triggered when the keyboard is pressed.
2. The keyup event is triggered when the key is restarted.
3. The keypress event is triggered when the keyboard is pressed.

The keypress and keydown functions are similar, but they are different in obtaining the event content.

Ii. Examples

Iii. Test Results
1. In the input box above, when you enter a letter r, the keydown will pop up for the first time, and keypress will be prompted in the future.
2. When we press pg dn restart, the keyup will pop up first and then the keydown will pop up.
3. When we press shift + c, only keypress will pop up.
4. When we press ctrl + alt, there will be no keypress. For the first time there will be two keydown. For the second press, the keyup will appear first, and then the keydown will appear
There are many possibilities. We only need to try the frequently used pipeline.
4. Obtain the ASCII value corresponding to the keyboard event
<script type="text/javascript"> $('#search_input') .keydown(function(event){ alert(event.keyCode); })</script>