Here we are going to explain what is keyup() event or how to use keyup() event or why to use keyup() event with example.


The jQuery keyup() event occurs when a keyboard button is released after pressing.Whenever a key is triggered, the keyup() method binds function to an event on an element. This method is executed or attach a function to run when a keyup() event occurs.

  • Syntax:

Trigger the keyup event for the selected elements:



  • Example of jQuery keyup() event

Let's see an example to of jQuery keyup() event.

<!DOCTYPE html>
<html xmlns="">
    <title>jquery keypress tutorial</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input").keyup(function () {
                $("#content").css("color", "red");
    Write something: <input type="text">
    <p id="content" style="margin-top:10px; width: 300px; height: 88px; color:#fff;">

As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.

$(“input”).keyup(function()) line specifies the event which will occur when key is released in the keyboard .

When user enter something in the text box, the text box value will display in “p” element.

When you run the above example, you would get the following output:

 Use jQuery keyup event

I hope it will help to you.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like