jQuery keyboard events

Hello guys, welcome to my jQuery tutorial. Visit wearewriter.com for more tutorials of jQuery.

So today we will discuss about jquery keyboard event. Events that occur when user presses a key on the keyboard.

These are keyboard event –

  1. keyup()- The key will be released.
  2. keydown() – The key is on its way down.
  3. keypress() – The key is on its way press.

So let’s discuss the all three Keyboard event

jQuery keyup() method

jquery keyup() event occurs when a keyboard key is released.The keyup() method triggers the keyup event.

SYNTAX-

$(selector).keyup()

Attach a function to the keyup event-

$(selector).keyup(function)
ParameterDescription
functionIt is Optional perameter. Specifies the function to run when the keyup event is triggered.

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script>  
$(document).ready(function(){   
    $("input").keyup(function(){  
        $("input").css("background-color", "violet");  
    });  
});  
</script>  
</head>  
<body> 

<H1>Jquery events by wearewriter.com</H1>   
Write something here: <input type="text">  
</body>  
</html> 

OUTPUT– when you write something text in input box so the color will be change due to keyup() method

jQuery keyboard events

jquery keydown() method

jquery keyup() event occurs when a keyboard key is press down .The keydown() method triggers the keydown event.The keypress() method triggers the keypress event

SYNTAX-

$(selector).keydown()

You can also Attach a function to the keydown event-

$(selector).keydown(function)
ParameterDescription
functionIt is an Optional. Specifies the function to run when the keydown event is triggered

EXAMPLE- here you can better understand the keydown() method with keyup() method so here we give you example for keydown() by using keyup().

when you write any text in input box then it will show violet color or when you press a text continuously then it will show green color.

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script>  
$(document).ready(function(){  
    $("input").keydown(function(){  
        $("input").css("background-color", "green");  
    });  
    $("input").keyup(function(){  
        $("input").css("background-color", "violet");  
    });  
});  
</script>  
</head>  
<body style="background-color: gray;color: white;"> 

<H1>Jquery events by wearewriter.com</H1>   
Write something here: <input type="text">   
</body>  
</html>

OUTPUT-

jquery keypress() method

The jQuery keypress () event is occurred when a keyboard button is pressed down. This event is similar to keydown() event.

SYNTAX-

$(selector).keypress()

You can also Attach a function to the keypress event-

$(selector).keypress(function)
ParameterDescription
functionIts an Optional. Specifies the function to run when the keypress event is triggered

EXAMPLE-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
i = 0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i += 1);
  });
});
</script>
</head>
<body style="background-color: gray;color: white;"> 

<H1>Jquery events by wearewriter.com</H1> 
Enter your name: <input type="text">

<p>Keypresses: <span>0</span></p>

</body>
</html>

OUTPUT-

I hope this jQuery tutorial help you to learn jQuey. You can also visit jquery official website jquery.com

If you like my article so guys follow me and if you have any query so you can ask on comment section .

Thank you guys for watching my article.

Leave a Comment

Show Buttons
Hide Buttons