Home »
jQuery »
jQuery DOM Manipulation Methods
jQuery keyup() Method
jQuery | keyup() Method: Learn about the jQuery keyup() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 20, 2022
keyup() Method
Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the keyup() method here.
The keyup() method is a built-in jQuery method. It gets triggered whenever the user releases the key pressed on the keyboard. Therefore, it executes the attached function, if any, when it detects any key released up for the selected element. Generally, the keyup event is used along with keydown event or keypress event to get some results. It detects every key-up moment whether the key is – SHIFT, ALT, ESC, etc.
keyup() Method Syntax
$('selector').keyup();
$('selector').keyup(function);
It takes one optional parameter – function. The function is the custom function that can be defined to do some tasks when this method gets triggered.
The below example shows how the keyup() method gets triggered when the user starts typing in the given input box and releases the key up. The times when the key is released, the statements get highlighted.
jQuery keyup() Method Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery Event - KeyUp</h2>
<p>Get to know when any key is pressed Up.</p>
<hr>
<h4>Press Any Key</h4>
<input type="text"><br><br>
<hr>
<ol></ol>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('input').keydown(function(){
$('ol').append('<li>Key Down</li>');
});
$('input').keyup(function(){
$('ol').append('<li style="background-color: yellow;">Key Up</li>');
});
});
</script>
</html>
Output:
