jQuery keyup Event
The keyup event fires when a pressed key is released. It is useful when you want to react after the user's key action is complete.
Syntax Top ↑
$( selector ).on( "keyup", function (event) {
// The pressed key was released.
});
Run Code When a Key Is Released Top ↑
$( function () {
$( document ).on( "keyup", function (event) {
alert( "Released: " + event.key );
});
});
Open the original keyup demo →
Display the Released Key Top ↑
$( document ).on( "keyup", function (event) {
$( "#d1" ).text(
"Released key: " + event.key + " | Code: " + event.code
);
});
Textarea Character Counter Top ↑
The original page uses keyup to count text. That purpose is preserved here, although the input event is usually a better choice for production counters because it also catches paste, drag/drop and other input methods.
$( "#d1" ).on( "keyup", function () {
const length = $( this ).val().length;
$( "#d2" ).text( length );
});
Open the original keyup counter demo →
See the full textarea counter tutorial and password validation using keyboard input.
Related Keyboard Events Top ↑
keydown() fires when the key is pressed. keypress() is retained as a legacy topic. The key-hold duration example uses both keydown and keyup.
Video Tutorial on Keyboard Events
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
