Hello friends,
Today we learn about the keyup and keydown event in jQuery and understand how they works.
keydown():
In jQuery, keydown() event is used when we want to perform any functionality on press of any key. keydown() event occurs after pressing of a key and after pressing a key it will automatically executes the function related to the event.
Syntax:
$(selector).keydown(function)
In above syntax, selector is the element and function is the attached function which execute after the pressing a key.
Let's take an example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#keyexample").keydown(function(){
alert('key press event');
});
});
</script>
</head>
<body>
Enter anything: <input type="text" id="keyexample">
</body>
</html>
When you run the above example on the browser it will give an alert whenever you will type anything on the input field.
keyup():
In jQuery, keyup() event is used when we want to hit a function after releasing a keyboard button. In other words, after pressing when we release the keyboard button keyup() event occurs.
Syntax:
$(selector).keyup(function)
In above syntax, selector is the element and function is the attached function which executes after the releasing a key.
Let's take an example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#keyexample").keyup(function(){
alert('key up event occurs');
});
});
</script>
</head>
<body>
Enter anything: <input type="text" id="keyexample">
</body>
</html>
When you run the above example on the browser it will give an alert whenever you release any key.
Let's take another example to understand both the event:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("#keyexample").keydown(function(){
$("#keyexample").css("background-color", "blue");
});
$("#keyexample").keyup(function(){
$("#keyexample").css("background-color", "orange");
});
});
</script>
</head>
<body>
Enter anything: <input type="text" id="keyexample">
</body>
</html>
When we run above example we will see the changes on the input field. When we press the button background color changes to blue and when we release the button background color changes to orange.
0 Comment(s)