jquery
  1. jquery-keypress
PreviousNext

jQuery keypress() Event

The keypress() event in jQuery is a useful tool for detecting when a user presses a key on their keyboard. This event can be used to trigger actions based on user input, such as navigating pages or submitting forms.

Syntax

The syntax for using the keypress() event in jQuery is as follows:

$(selector).keypress(function(){
  // code to execute on keypress
});

In this syntax, the selector specifies the HTML element to which the event listener is to be attached. The function() is the code that will be executed when the keypress() event occurs.

Use

The keypress() event is commonly used to detect when a user inputs data into a form field or search bar, and to provide real-time feedback to the user as they type. It can also be used to navigate through a web application using keyboard shortcuts or to trigger actions, such as opening a menu or submitting a form.

Example

Here is an example of using the keypress() event to display real-time feedback to the user as they type in a search bar:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Keypress Event Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#search-bar').keypress(function(){
                var searchQuery = $(this).val();
                $('#search-results').html('You are searching for: ' + searchQuery);
            });
        });
    </script>
</head>
<body>
    <input type="text" id="search-bar" placeholder="Search...">
    <div id="search-results"></div>
</body>
</html>
Try Playground

In this example, we use the keypress() event to detect when the user types in the search bar, and then display the search query in real-time within an HTML element with the id of search-results.

Summary

The keypress() event in jQuery is a useful tool for detecting when a user presses a key on their keyboard. It can be used in a variety of contexts, such as providing real-time feedback to users as they type or triggering navigation or action within a web application. With its simple syntax, it's easy to use and implement in your projects.

keydown()keyup()
Published on: