jQuery Keyboard Events Complete Guide
jQuery Keyboard Events refer to the set of events that are triggered by the keyboard keys. With jQuery, you can bind or attach various keyboard events to HTML elements and perform specific actions when the user interacts with them using the keyboard. Some of the most commonly used keyboard events in jQuery include keypress, keydown, and keyup. These events can be used to capture the user's input, validate data, control the flow of the application, and provide a better user experience.
However, jQuery provides several keyboard events that allow you to handle user input via the keyboard. Here are some of the most commonly used keyboard events in jQuery:
- .keydown(): The keydown() event is triggered when a key on the keyboard is pressed down.
- .keyup(): The keyup() event is triggered when a key on the keyboard is released.
- .keypress(): The keypress() event is triggered when a key that produces a character value is pressed down. This event is similar to keydown(), but it is not triggered for keys that do not produce a character value (such as the arrow keys).
To use these events, you can attach them to an element using the jQuery on() method. For example, to handle the keydown() event on a text input element with the ID "myInput", you could write the following code:
$('#myInput').on('keydown', function(event) {
console.log('Key pressed:', event.which);
});
Jquery keydown() event
The keydown() event in jQuery is triggered when a keyboard key is pressed down. This event is attached to an element and is fired whenever a user presses a key while the element is in focus.
The syntax to bind the keydown() event in jQuery is as follows:
$(selector).keydown(function() {
// code to be executed when the key is pressed down
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery keydown() event example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p>Press the 'b' key to toggle the background color</p>
<div id="mydiv">This is a div element</div>
<script>
$(document).keydown(function(event) {
if (event.key === 'b') {
$('#mydiv').toggleClass('highlight');
}
});
</script>
</body>
</html>
jQuery keyup() event
$(selector).keyup(function() {
// code to be executed
});
<!DOCTYPE html>
<html>
<head>
<title>jQuery keydown() event example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.mydiv {
font-family: sans-serif;
padding: 40px;
}
</style>
</head>
<body>
<div id="mydiv">
<p>Enter any key and you will see the result</p>
<input type="text" name="name" id="name"><br>
<span id="name_val"></span>
</div>
<script>
$(document).ready(function () {
$('#name').keyup(function (event) {
$('#name_val').html("You Enter:<b> " + event.key + "<b>");
});
});
</script>
</body>
</html>
In the above example, the keyup() event is attached to the entire document object. When a key is released, the function is executed and checks whether the released key is the "Enter" key. If it is, the code inside the if block will be executed.
The keyup() event can be used to detect when any key on the keyboard is released. It is often used in combination with other keyboard events, such as keydown() and keypress(), to create complex interactions with keyboard input.
jQuery keypress() event
The jQuery keypress() event is triggered when a keyboard key is pressed down and released. It is a type of keyboard event that is used to detect when a user presses a key on the keyboard.
The syntax for using the keypress() method is as follows:
$(selector).keypress(function() {
// code to be executed
});
In the above syntax, the selector refers to the HTML element(s) that the keypress() event will be attached to. The function that is passed as an argument to the keypress() method will be executed whenever the keypress event is triggered.
Here is an example of using the keypress() event to detect when a specific key is pressed:
<!DOCTYPE html>
<html>
<head>
<title>jQuery keypress() event example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.mydiv {
font-family: sans-serif;
padding: 40px;
}
</style>
</head>
<body>
<div id="mydiv">
<p>Press a from your keyboard for seeing alert message</p>
</div>
<script>
$(document).keypress(function (event) {
if (event.key === "a") {
alert("you presses a from your keyboard");
}
});
</script>
</body>
</html>
