Updated March 20, 2023
Overview of jQuery keydown()
The jQuery keydown() method is used to handle the key down event which is generated by pressing the keyboard button. This is a built-in method in jQuery. This method is used to handle the keydown event which is generated by pressing the key on the keyboard and the keydown() method handle the event by executing associated function.
The keydown() event is usually used with other two events.
- Keypress() event: This event is generated when the key is pressed down.
- Keyup() event: This event is generated when the key is released.
The order of an execution of the jQuery event methods is:
- keydown() event
- Keypress() event
- Keyup() event
The syntax of the keydown() method:
- $(selector).keydown(): This method triggers the keydown event for selected html elements.
- $(selector).keydown( function ): This method triggers a function to the keydown event for selected html element.
Parameter:
Function: This is an optional parameter. It specifies the name of the method which is to be executed when the keydown event is generated.
Examples of jQuery keydown()
Example of jQuery keydown ( ) method with parameters are as follows –
Example #1
Next, we write the html code to understand this method more clearly with the following example where we apply the keydown() method to the first input text box element
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery keydown( ) method </title>
<!-- code to show the jQuery keydown( ) working method -->
<script>
$(document).ready( function(){
$( "input" ).keydown( function(){
$( "input" ).css( "background-color", " red ");
});
});
</script>
</head>
<body>
Write here to generate event : <input type = "text">
</body>
</html>Output:
Once we press the key in the text box, the output is –
In the above code, the keydown() method is used. As the use of keydown() method is to trigger the event and handle the keydown event of the selected elements in the jQuery collection, If we write something in the text box then the text box colour changes red on keydown, as showing in the above output.
Example #2
Next, we rewrite the html code to understand the jQuery keydown() and jQuery keyup() method more clearly with the following example where we apply the keydown() method and jQuery keyup() method to the first input text box element –
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery keydown( ) method </title>
<!-- code to show the jQuery keydown( ) working method -->
<script>
$(document).ready( function(){
$( "input").keydown( function(){
$( "input").css( "background-color", " red ");
});
$( "input").keyup( function(){
$( "input").css( "background-color", " yellow ");
});
});
</script>
</head>
<body>
Write here to generate event : <input type = "text">
</body>
</html>Output:
Once we press the key in the text box, the output is –
As in the above output, the keydown() method triggers the event and handle the keydown event of the selected elements in the jQuery collection, If we write something in the text box then the text box colour changes red on keydown and yellow on keyup events, as showing in the above output.
Example #3
Next, we rewrite the html code to understand the jQuery keydown(), jQuery keyup() method and jQuery keypress() method more clearly with the following example where we apply the keydown() method, jQuery keyup() method and jQuery keypress() method to the first input text box element –
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
lt;script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery keydown( ) method </title>
<!-- code to show the jQuery keydown( ) working method -->
<script>
$(document).ready(function(){
$( "input" ).keydown( function(){
$( "input").css( "background-color", " red ");
});
$("input").keyup(function(){
$( "input").css( "background-color", " yellow ");
});
$("input").keypress(function(){
$( "input").css( "background-color", " black ");
});
});
</script>
</head>
<body>
Write here to generate event : <input type = "text">
</body>
</html>Output:
Once we press the key in the text box the background colour change to black and key release the background colour change to yellow, the output is –
When we press the backspace key in the text box then only the jQuery keydown() method is executing, otherwise, on keypress, the jQuery keypress() method is executing and the output is –
Conclusion
- The jQuery keydown() method used to handle the key down event.
- The keydown event is generated by pressing any keyboard button.
- It is a built-in method in jQuery.
- The method is used to handles the keydown by executing an associated function.
- The keydown() event is usually used with other two events, which are Keypress() event ( generated when the key is pressed down) and Keyup() event ( generated when the key is released).
- The syntax of the keydown() method is $(selector).keydown() and $(selector).keydown( function ), the parameter function is an optional parameter. It specifies the name of the function which is to be executed when the keydown event is generated.
Recommended Articles
This is a guide to the jQuery keydown(). Here we discuss jQuery keydown() method used to handles the keydown event along with examples and code implementation. You may also look at the following articles to learn more –
