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

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

article image
»

How to Use jQuery to Create Blinking Text

Blinking text is one of those cool features that you never actively ...

article image
»

Convert Images to Black and White using jQuery

Converting an image to black and white is no longer a manual event. ...

article image
»

How to Disable Right-Click Menu Using jQuery

There can be dozens of reasons why you may want to disable right ...

article image
»

How to Optimize jQuery Code for Better Performance

jQuery is the most popular client side library, in fact almost every ...

article image
»

Using Head.js to Load All Your JavaScript

In the past few years, client side frameworks/libraries have become ...

article image
»

How to Detect Browser Using jQuery

One of the more frustrating parts of creating a new web project is ...