jQuery keypress event

Filed Under: jQuery

jQuery keypress is one of the keyboard event methods. Other jQuery keyboard event methods are keyup and keydown.

jQuery keypress

jQuery keypress method triggers with key press event of the javascript. Since this event varies across browsers, this is not covered in any official specification. This event triggers only for the focused element. This can vary across different browsers.

jQuery keypress method syntax

  1. keypress(): This jQuery keypress method is used without any arguments.
  2. keypress(handler): This jQuery keypress method attaches a function to be executed when the keypress event is fired.

jQuery keypress example

Following example demonstrates the use of jQuery keypress method.

jquery-keypress.html


<!DOCTYPE html>
<html>
<head>
<title>jQuery keypress event example</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
  $("input:text").keyup(function(){
    $("input:text").css("background-color","red");
  });
$("input:text").keypress(function(){
    $("input:text").css("background-color","yellow");
  });
  //reset jQuery keydown css
  $("input:reset").click(function(){
    $("input:text").css("background-color","white");
  });
});
</script>
</head>
<body>
<h3>jQuery keypress example</h3>
Enter anything: <input type="text">
<input type="reset">
<br><br>
Type something above, background colour will change to yellow on key press.
<br><br>
Click on Reset button to try again.
</body>
</html>

In above example, when the key is pressed, keypress() method is triggered which in turn executes the function that changes the background colour to yellow.

Below screencast shows above jQuery keypress event example in action.

jquery keypress example, jquery keypress event

jQuery keypress demo

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages