How to use JQuery Event keyup() Method

This article describe about jQuery Event keyup() Method.
  • 3120

jQuery Event keyup() Method

The keypress has the two part.

  1. key is pressed down
  2. key is released and key goes up again.

When button is released keyup event occur. And it occurs on that element that has the currently focus.

The keyup() method generate the keyup event.

Example

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input").keydown(function () {

            $("input").css("background-color", "Gray");

        });

        $("input").keyup(function () {

            $("input").css("background-color", "yellow");

        });

    });

</script>

</head>

<body>

Enter name: <input type="text" />

<p>Enter name in the input field. It will change background color on keydown and keyup.</p>

</body>

</html>

 

Output

 

keyup() method pic41.jpg

 

Note: output show above after "g" key released.

Trigger the keyup Event

Generate trigger of keyup event for selected element.

 

Example

 

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        $("input").keydown(function () {

            $("input").css("background-color", "Gray");

        });

        $("input").keyup(function () {

            $("input").css("background-color", "yellow");

        });

        $("#btn1").click(function () {

            $("input").keydown();

        });

        $("#btn2").click(function () {

            $("input").keyup();

        });

    });

</script>

</head>

<body>

Enter name: <input type="text" />

<p>Enter name in the input field. It will change background color on keydown and keyup.</p>

<p><button id="btn1">Activate keydown event for input field</button></p>

<p><button id="btn2">Activate keyup event for input field</button></p>

</body>

</html>

 

Output

 

keyup() method pic42.jpg

 

Note: Output show above after the click on the activate keydown event button.

 

Bind a Function to the keyup Event

It is define a function to run when keyup event occur.

 

Syntax

 

$(selector).keyup(function)

You may also want to read these related articles Click here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.