jQuery keyup event


The keyup event in jQuery is used to handle interactions when a user releases a key on the keyboard while focusing on an element. It’s similar to the keydown event but triggers after the key has been released, making it useful for scenarios where you need to react to the completion of a key press, such as updating real-time search results or form validation.

Basic Syntax

To attach a keyup event handler in jQuery, use the following syntax:

$(selector).keyup(function(event) { // Code to execute on keyup });

Example Usages

1. Simple Keyup Event

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Keyup Event Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("#myInput").keyup(function(event) { console.log("Key released: " + event.key); }); }); </script> </head> <body> <input type="text" id="myInput" placeholder="Type something"> </body> </html>

Explanation:

  • $("#myInput").keyup(function(event) {...}) attaches a keyup event handler to the input field with the ID myInput.
  • event.key provides the key value that was released and is logged to the console.

2. Live Search

A common use of the keyup event is to implement a live search feature that updates search results as the user types.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Live Search Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("#searchInput").keyup(function() { var query = $(this).val().toLowerCase(); $(".searchResult").each(function() { var text = $(this).text().toLowerCase(); if (text.includes(query)) { $(this).show(); } else { $(this).hide(); } }); }); }); </script> </head> <body> <input type="text" id="searchInput" placeholder="Search..."> <div class="searchResult">Apple</div> <div class="searchResult">Banana</div> <div class="searchResult">Cherry</div> </body> </html>

Explanation:

  • As the user types in the search input field, the keyup event handler filters the search results by checking if they include the search query.

3. Displaying Key Codes

You can also use keyup to display key codes or perform actions based on specific key releases.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Keyup Event Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $(document).keyup(function(event) { console.log("Key code: " + event.which); // Log key code }); }); </script> </head> <body> <p>Press any key</p> </body> </html>

Explanation:

  • event.which provides the key code of the released key, which is logged to the console.

4. Combining Keyup with Keydown

Sometimes you might want to use keyup in conjunction with keydown to track the entire key press cycle.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Key Events Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $("#myInput").keydown(function(event) { console.log("Key down: " + event.key); }).keyup(function(event) { console.log("Key up: " + event.key); }); }); </script> </head> <body> <input type="text" id="myInput" placeholder="Type something"> </body> </html>

Explanation:

  • keydown and keyup handlers are attached to the input field to log key events as they occur.

Event Object

The event object for keyup provides details about the key release:

  • event.key - The value of the key that was released (e.g., "Enter", "A", "1").
  • event.keyCode - The code for the key released (deprecated, use event.key).
  • event.which - The code for the key released (also deprecated, use event.key).

Event Delegation

For dynamically added elements, use event delegation to handle keyup events.

$(document).on("keyup", "#dynamicInput", function() { console.log("Key released in dynamic input"); });

Explanation:

  • $(document).on("keyup", "#dynamicInput", ...) attaches a keyup event handler to #dynamicInput, even if it is added to the DOM after the page loads.

Use Cases

  • Real-time Input Validation: Validate or format user input as they type, such as checking for valid email addresses or phone numbers.
  • Live Search: Update search results or filters based on user input without requiring form submission.
  • Custom Shortcuts: Implement custom keyboard shortcuts or actions that are triggered upon key release.

Performance Considerations

  • Debouncing: For scenarios where keyup events trigger frequent updates, consider debouncing to improve performance and reduce unnecessary computations.
  • Event Delegation: Use event delegation to handle events efficiently for dynamically added elements.