jQuery keyup event

Filed Under: jQuery

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

jQuery keyup

jQuery keyup method triggers when you release the pressed key. You can attach functions to execute when this event occurs.

jQuery keyup method syntax

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

jQuery keyup example

Following example demonstrates the use of jQuery keyup method.

jquery-keyup.html


<!DOCTYPE html>
<html>
<head>
<title>jQuery keyup 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");
  });
  //reset jQuery keyup css
  $("input:reset").click(function(){
    $("input:text").css("background-color","white");
  });
});
</script>
</head>
<body>
<h3>jQuery keyup example</h3>
Enter anything: <input type="text">
<input type="reset">
<br><br>
Type something above, after key up background color will change to Red.
<br><br>
Click on Reset button to try again.
</body>
</html>

In above example, when the key is up, keyup() method is triggered which in turn executes the function that changes the background colour to red.

Below screencast shows above jQuery keyup example in action.

jquery keyup example

jQuery keyup demo

Comments

  1. Monika says:

    i have to calculate time difference between a particular key is pressed n released,as i want to implement keystroke dynamics. Plz do help either in javascript or jquery

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