How to run the code on keypress event using jQuery ?

How to run the code on keypress event using jQuery ?

Last Updated : 30 May, 2023

In this article, we will see how to run the code snippet on the keypress event using jQuery. The keypress event is triggered when the keyboard button is pressed by the user.

Syntax:

$(selector).keypress()

In the below example, we are creating a textarea element and when the user starts pressing a key to write some content on the textarea, the keypress event is triggered. When this event is triggered, the CSS styles are added to the element.

Example: In this example, we will see the use of a keypress event.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to run the code on keypress
        event using jQuery ?
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("textarea").keypress(function () {
                $("textarea").css({
                    background: "green",
                    color: "white",
                });
            });
        });
    </script>
</head>

<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>
            How to run the code on keypress
            event using jQuery ?
        </h3>
        <textarea rows="5" cols="30"></textarea>
    </center>
</body>

</html>

Output:

How to run the code on keypress event using jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to run the code on change event using jQuery ?

In this article, we will see how to run the code on change events using jQuery. The change event is used to trigger when the user changes the value of the element. Syntax: $(selector).change(function) Example: In the below example, we are creating a textarea element that contains GeeksforGeeks text.

How to run a code on mouseenter event in jQuery ?

In this article, we will see how to run the code when the mouse enters into the specific area using jQuery. To run the code on a mouse enter a specific area, mouseenter() method is used. The mouseenter() method works when the mouse pointer moves over the selected element. Syntax: $(selector).mouseen

How to run a code on click event in jQuery ?

In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h

How to check whether the META key pressed when event is fired using jQuery ?

jQuery is a feature-rich JavaScript library. It is a fast and most used JavaScript library. Before using jQuery you must have a basic knowledge of HTML, CSS, and JavaScript. In this article, we will learn about how you can check whether the META key was pressed when the event fired JQuery. META key:

How to Detect Keypress using JavaScript ?

In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style