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 Remove an Event Handler using jQuery ?

In jQuery, event handlers allow developers to execute code when users interact with elements, such as clicking a button or hovering over a link. However, there are situations where you may need to remove these handlers to prevent further actions or optimize performance, which can be done using speci

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

How to count words in real time using jQuery ?

In this article, we will learn how to count words in real-time using jQuery. We have an input field, and when we type, we get the number of words in the input in real time. Approach: First, we select the input field and store its value in a variable. We call a function called wordCount() when a keyb

How to Use onKeyPress Event in ReactJS?

The onKeyPress event in ReactJS occurs when the user presses a key on the keyboard but it is not fired for all keys e.g. ALT, CTRL, SHIFT, ESC in all browsers.ApproachTo use the onKeyPress event in React we will use the predefined onKeyPress event prop. We will be using a text input field, and pass

How to submit a form on Enter button using jQuery ?

Given an HTML form and the task is to submit the form after clicking the 'Enter' button using jQuery. To submit the form using 'Enter' button, we will use jQuery keypress() method and to check the 'Enter' button is pressed or not, we will use 'Enter' button key code value. html <!DOCTYPE html>

How to disable form submit on enter button using jQuery ?

There are two methods to submit a form, Using the "enter" key: When the user press the "enter" key from the keyboard then the form submit. This method works only when one (or more) of the elements in the concerned form have focus. Using the "mouse click": The user clicks on the "submit" form button.