X

LATEST #JQUERY NEWS

How to Use jQuery’s Keystroke Methods


jQuery has a few built-in keystroke methods that are all triggered by different stages of keys being pressed on a user’s keyboard. If you want to be able to keep track of how many keystroke a user makes, or if you want an event to be triggered as the result of a key being pressed (or released), then this methods can help you achieve those things. The keystroke methods that we’ll go over in this tutorial are .keypress(), .keydown(), and .keyup() — from their names you might be able to roughly gather what type of keystroke action it takes to trigger each of them.

.keypress()

The .keypress() method is triggered when a key is pressed down. This event can be used to keep track of how many times a user presses a key down within a certain time frame, or within a certain element (like an input or textbox field — the method can be used to keep track of not how many characters are within the element, but how many times the user makes a keypress).

Here’s how the syntax would look if you want to measure the amount of keypresses that occur within a particular textbox:

i=0
$("textbox").keypress(function(){
     console.log(i += 1);
})

.keydown()

The .keydown() method is actually very similar to the .keypress() method. While .keypress() is triggered when a key is pressed all the way down, .keydown() triggers an event when the key is just beginning to be pressed, or when its on the way down. If a key is on the way down, there’s good chance that it’s going to be pressed all the way down, but that’s not a guarantee, so even though .keydown() and .keypress() are extremely similar to each other, they shouldn’t necessarily be used interchangeably.

The syntax, however, is the same. If you want to keep track of the amount of times the keys are pressed down (rather than all the way), you can use the same function as the one in the example above and replace .keypress() with .keydown(). .keypress() and .keydown() can also be used to trigger events other than keeping track of the amount of keystrokes that have occurred. For an idea of how you might do that, see the .keyup() example below.

.keyup()

Maybe you’ve guessed it by now, but if you haven’t, the .keyup() method is triggered when a key is on the way up — this usually happens after it’s been pressed all the way down. When a key is released, the event is triggered. Again, keys can’t be released unless they’ve been fully pressed down, so it is rather similar to the .keypress() method, however, it’s not a great idea to use them interchangeably.

The syntax is similar to that of both the .keypress() and .keydown() methods. In the example below, see how you would use the method to trigger an event that would change the CSS of a particular element when a key is released (remember, this will happen when any key is released within an textarea field, you can’t restrict the event method to a particular key).

$("textarea").keyup(function(){
   ("textarea").css("color", "blue");
})

Recently Published

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...

article image
»

How to Dynamically Trim Text Using jQuery

This easy beginners jQuery tutorial demonstrates how you can use ...

article image
»

jQuery Snippets: Getting the Current Year

Here’s a fun, simple, and incredibly useful jQuery that you can ...

article image
»

jQuery Snippets: How to Conditionally Enable Submit

One easy way to prevent users from submitting an empty form in a ...

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...

article image
»

jQuery Snippets: Using jQuery to Check All Boxes

When you’ve given your users a ton of checkbox input fields ...

article image
»

Useful jQuery Code Snippets for Working with Images

Images are an essential part of any website and sometimes working ...

article image
»

How to Use jQuery to Check if Cookies are Enabled

A cookie (not the kind with chocolate chips) is a small piece of data ...