• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Keydown, Keypress, and Keyup Example

April 29, 2014 //  by Krishna Srinivasan//  Leave a Comment

JQuery keydown() Event

The keydown event occurs when user presses a key on the keyboard. Whenever a key is pressed down, the keydown() method attaches event handler to the keydown JavaScript event or triggers that event on an element. The keydown event is sent to an element when user presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. By pressing some keys which will trigger only keydown event such as Shift, Ctrl, Alt, Insert, Home, Page Up, Delete, End, Page Down, and Caps Lock.

JQuery keydown() Syntax

$(selector).keydown (function)

It binds a function to keydown event.

Or

$(selector).keydown ()

It triggers the keydown event for selected elements.

It has parameter called function which is optional parameter defines function to run when event occurs or function executes when the event is triggered.

JQuery keypress() Event

The keypress event occurs when user presses a key on the keyboard. It is used to count number of key presses in the output field. It is quite similar to keydown element and occurs when a button is pressed down. Whenever a key is pressed, the keypress() method binds function to an event on an element. This method is used to perform any action or run a function as keypress event occurs in your web document. The keypress event returns different values for lowercase and uppercase letters. So it is useful when you have to differentiate between lowercase and uppercase. The keypress event is not fired for all keys such as Shift, Ctrl, Alt, Insert, Home, Page Up, Delete, End, Page Down, and Caps Lock.

JQuery Keypress() Syntax

$(selector).keypress (function)

It binds a function to keypress event.

Or

$(selector).keypress ()

It triggers the keypress event for selected elements.

It has parameter called function which is optional parameter defines function to run when event occurs or function executes when the event is triggered.

JQuery Keydown() and Keypress() Example

<!DOCTYPE html>
<head>
<title>Keydown and Keypress Events</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Keydown and Keypress Events Example</h2>
<script type="text/javascript">
   var kdown = 0;
   var kpress = 0;
     $(document).ready(function() {
       $("#textbox").keydown(function(event) {
         $("#kdown").html(++kdown);
        });
       $("#textbox").keypress(function(event) {
         $("#kpress").html(++kpress);
        });
      });
</script>
<body>
   Enter text:<input id="textbox" type="text">
   <p>keydown() event:<span id="kdown">0</span>times</p>
   <p>keypress() event:<span id="kpress">0</span>times</p>
</body>
</html>
  • Try It On JSFIDDLE
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“#textbox”).keydown(function(event)) line determines that event occurs when user presses a key on the keyboard which refers to id of textbox i.e. #textbox and $(“#textbox”).keypress(function(event) ) determines that event occurs when user presses a key on the keyboard and this is also refers to id of textbox i.e. #textbox.
  • $(“#kdown”).html(++kdown); and $(“#kpress”).html(++kpress); both lines increases number of key pressed counts which are pressed by on the keyboard.
  • we have used span tag to group inline elements in a document.

When you run the above example, you would get the following output:

KeydownKeypressExample

JQuery Keyup() Event

This event occurs when key is released in the keyboard. Whenever a key is triggered, the keyup() method binds function to an event on an element. This method is used to perform any action or run a function as keypress event occurs in your web document. The keyup event returns different values for lowercase and uppercase letters.

JQuery Keyup() Syntax

$(selector).keyup (function)

It binds a function to keyup event.

Or

$(selector).keyup ()

It triggers the keyup event for selected elements.

It has parameter called function which is optional parameter defines function to run when event occurs or function executes when the event is triggered.

JQuery Keyup() Example

<!DOCTYPE html>
<head>
<title>Keypress Event</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Keydown and Keypress Events Example</h2>
<script type="text/javascript">
   $(document).ready(function() {
      $("input").keyup(function() {
        alert("keyup event occured!");
      });
   });
</script>
<body>
   Enter text: <input type="text">
</body>
</html>
  • Try It On JSFIDDLE
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“input”).keyup(function()) line specifies the event which will occur when key is released in the keyboard .
  • When user enter something in the text box, alert box will display with specified message.

When you run the above example, you would get the following output:

KeyupExample

 

KeyupExample1

Category: jQueryTag: JQuery Events

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: «jquery JQuery Select Event Example
Next Post: JQuery before() And insertBefore() Example jquery»

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact