BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery keyup() Method

Last Updated: May 4, 2019 by Chaitanya Singh | Filed Under: jQuery

jQuery keyup() Method triggers the keyup event when any button on the keyboard is released. This method attaches an html element to event handler function, this event handler function executes when the keyup event occurs. You can think of it as an opposite of keydown event.

jQuery keyup() Method Syntax

$("input").keyup(function(){
  //this code executes when the keyup event occurs
});

Here we have attached the input text field to the event handler function using keyup() method, which means the keyup event will trigger when a key is released inside input text field.

jQuery keyup() Example

In the following example we are using both the methods, keydown() and keyup(). Here we have two event handler functions, the first event handler function is attached to input text using keydown() method and the second event handler function is attached to input text field using keyup() method.

Here we are changing the background colour of input text field to green when keydown event occurs and the background colour changes to yellow when keyup event occurs. See the screenshots in the output.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color", "green");
  });
  $("input").keyup(function(){
    $("input").css("background-color", "yellow");
  });
});
</script>
</head>
<body>

<h2>jQuery keyup event example on Beginnersbook.com</h2>
Write anything here: <input type = "text">
<p>The background color of input text field will change to green, when you
press a key inside the input field and the color will change to yellow when you release the key inside the input text field.</p>
</body>
</html>

Output:
Before a key is released:
This screenshot is taken when the page is loaded in browser and no activity is performed on the page.
jQuery keyup
After a key is pressed inside the input field:
This screenshot is taken after a key is pressed down inside the input field, As you can see in the screenshot, the background colour of the field is changed to green. This logic of changing colour to green is written inside first event handler function which is associated to input field using keydown() method. This event triggered when a key is pressed down in the input field.
jQuery keyup method
After a key is released inside the input field:
This screenshot is taken after a key is released inside the input text field, as you can see in the screenshot, the background colour of the field is changed to yellow. This logic of changing colour to yellow is written inside second event handler function which is associated to input field using keyup() method. This event triggered when a key is released inside the input field.
jQuery keyup event

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery Sliding Effects
  3. jQuery keypress() Method
  4. jQuery val()
  5. jQuery change() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

Leave a Reply Cancel reply

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

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2025 BeginnersBook . Privacy Policy . Sitemap