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
»

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 ...

article image
»

A Beginner’s Guide to jQuery’s Selectors

We talk a lot about event methods on this site, but not so much about ...

article image
»

Add Keyboard Shortcut to Anchor Tag Using jQuery

Making a user friendly website can be quite a challenging task. There ...

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...