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:

var 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
»

7 Responsive jQuery Dropdown Menu Plugins

Dropdown Menu Plugins Dropdown menus are mostly used for website ...

article image
»

20 Stylish and Modern jQuery Tooltip Plugins

jQuery Tooltip Plugins Tooltips are a great option for showing extra ...

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...