In this example, we will learn about the jquery keydown() event. When we press the key on the keyboard, the jquery keydown() event occurs. It triggers the function associated with the event.
The keydown() event is divided into two event methods.
- Keypress(): This event specifies that the key is pressed down.
- Keyup(): This event specifies that the key is released.
Syntax:$(selector).keydown() The above syntax specifies the keydown event for selected elements and it executes the function when it triggers.
Example:
Follow the below example to create a jquery keydown() event.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JQuery keydown() event with example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
Enter your name: <input type="text">
</body>
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "#89CFF0");
});
$("input").keyup(function(){
$("input").css("background-color", "#FBCEB1");
});
});
</script>
</html> Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example