Home > Web Front-end > JS Tutorial > Detailed examples of how to use jquery keyboard events

Detailed examples of how to use jquery keyboard events

小云云
Release: 2017-12-29 09:27:17
Original
1366 people have browsed it

This article mainly introduces relevant information on the detailed use of jquery keyboard events. It mainly introduces three methods such as keydown(), keyup(), and keypress(). Friends in need can refer to it. I hope it can help everyone.

Detailed explanation of how to use jquery keyboard events

jQuery has three functions to handle keyboard events. According to the order in which the events occur, they are:

jquery code:

1. keydown();
2. keyup();
3. keypress();

##keydown( )

The keydown event will be triggered when the keyboard is pressed. You can return false in the bound function to prevent the browser's default event from being triggered.


keyup()

The keyup event will be triggered when the key is released, which is the event after you press the keyboard.

keypress( )

The keypress event will be triggered when the key is struck. We can understand it as pressing and lifting the same key.


The keypress event can pass a Parameter event, in fact, some jQuery event functions can pass such a parameter:


jquery code:



$('input').keydown(function(event){  
    alert(event.keyCode);  
});
Copy after login

above In the code, event.keyCode can help us get what key we pressed. It returns the ascii code, such as the up, down, left and right keys, which are 38, 40, 37, 39 respectively


If we want to implement ctrl+Enter, it is ctrl+Enter to submit the form


##

$(document).keypress(function(e) {  
   if (e.ctrlKey && e.which == 13)
   $("form").submit();  
}) ;
Copy after login

Related recommendations:


js A brief explanation of keyboard events

Detailed explanation of the difference between jQuery keyboard events keydown and keypress

Introduction to javascript/jquery keyboard events

The above is the detailed content of Detailed examples of how to use jquery keyboard events. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template