Introduction to using jquery keyboard events_jquery

1. The first thing you need to know is:
1. keydown()
keydown event will be triggered when the keyboard is pressed.
2. keyup()
keyup The event will be triggered when the key is released, that is, the event after you press the keyboard and lift it up
3. keypress()
The keypress event will be triggered when the key is tapped. We can understand it as pressing and lifting the same Press keys
2. Obtain the corresponding ascII code on the keyboard:

Copy the code The code is as follows:

$(document).keydown(function(event){
console.log(event.keyCode);
});

$tips: In the above example, event.keyCode can help us get what keys we pressed on the keyboard. It returns the ASCII code, such as the up, down, left and right keys, which are 38, 40, 37, 39 respectively;
3. Example (when pressing the left and right keys on the keyboard)

Copy code The code is as follows:

$(document).keydown(function(event){
//Judge when event.keyCode is 37 (i.e. left side key), execute function to_left();
/ /Judge when event.keyCode is 39 (i.e. the right key), execute the function to_right();
if(event.keyCode == 37){
//do somethings;
}else if ( event.keyCode == 39){
//do somethings;
}
});

Case study:
For example: novel It is common in websites to press the left and right keys to achieve the previous article and the next article; press ctrl and enter to implement form submission; all shortcut key operations in Google Reader and Youdao Reading... (to improve user experience)
If we want to implement ctrl Enter means ctrl enter to submit the form, we can do this:

Copy the code The code is as follows:

$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})
//Keyboard operation
$(document).keydown(function(event){
var e = event || window.event;
var k = e.keyCode || e .which;
switch(k) {
case 37:
//…
break;
case 39:
//…
break;
}
return false;
})

More detailed summary and description of the event: http://www.jb51.net/article/28772.htm

jQuery Event Reference Manual on w3school

During the learning process, you should think more about how to improve interactivity and user experience.