How to use JQuery Event keydown() Method

This article describe about jQuery Event keydown() Method.
  • 2831

jQuery Event keydown() Method

When you press any key form your keyboard then it's 2 part occur.

  1. The key is pressed down.
  2. The key is released.

When keyboard key is pressed then keydown event occur, keydown() method trigger the keydown event, or it also define a function to run when keydown event occurs.

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>

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

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

</body>

</html>

 

Output

 

keydown() method pi c37.jpg

 

Note: This is a output when "d" key pressed in the input field.

 

Trigger the keydown Event

For selected element trigger occur on keydown.

 

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

 

keydown() method pic38.jpg

 

Bind a Function to the keydown Event

Define a function to run when keydown event occur for selected element.

 

Syntax

 

$(selector).keydown(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

© 2019 DotNetHeaven. All rights reserved.