JAVASCRIPT

More Mouse and Keyboard Events with the jQuery JavaScript Library

Welcome to the fourth article in an eight-part series on the jQuery JavaScript library. In this part, I will walk you through using a pair of brand new methods provided by the library for processing some additional keyboard-related actions, such as keydown and keyup events.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

September 02, 2009

TABLE OF CONTENTS:

And now that I'm speaking of keyboard actions, I'd like to conclude this fourth tutorial of the series by showing you a final hands-on example concerning the use of jQuery to handle keyup events. Of course, if you examined all of the previous code samples, then it's possible that at this point you know how to perform this task in a simple way.

Yes, you guessed right! Not surprisingly, jQuery offers a handy method, obviously called "keyup()," which can be used to intercept this kind of event and respond properly. In this case, to demonstrate how to implement this brand new method in an approachable fashion, below I listed a final hands-on example, which will display an alert box in response to a "keyup" action.

Please take a look at the corresponding code sample, which looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using jQuery with keyup event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: 24px bold Arial, Helvetica, sans-serif;

color:#000;

}

</style>

$(document).ready(function(){

$("a").keyup(function(){

alert('Redirecting to Devshed.com now!');

});

</script>

</head>

<body>

<h1>Basic example on using jQuery with keyup event</h1>

<a href="http://www.devshed.com/">Visit Devshed.com now!</a>

</body>

</html>

Definitely, I'm not going to spend a long time explaining how this last hands-on example works, since it looks very similar to the ones that you learned in previous sections of this tutorial. In short, the keyup() method is assigned to a link that points to "Devshed.com," meaning that a hypothetical user will be faced with an alert box when the link gets focus and a key is released. As you can see, understanding how the keyup() method functions is easy, even for inexperienced JavaScript developers.

And with this last example, I'm concluding this fourth part of the series. As always, you're completely free to use all of the code samples developed in this article. This will help you to acquire more practice in using the set of event handling methods that come bundled with jQuery. Happy coding!

Final thoughts

In this fourth episode of the series, I walked you through using a pair of brand new methods provided by the jQuery library to process some additional keyboard-related actions, such as "keydown" and "keyup" events.

In the forthcoming article, I'm going to explain how to use the library to trigger specific functions when an element within a web page is focused and blurred as well. So don't miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.