JAVASCRIPT

Focusing and Blurring Elements with the jQuery JavaScript Library

If you’re a web designer who’s looking for a JavaScript library that lets you develop powerful client-side applications by using a friendly programming interface, then I have great news for you. This series of articles gets you started using the most relevant features that comes packaged with the jQuery JavaScript framework. You'll be able to get the most out of this useful piece of software in a very short time. This is the fifth article in an eight-part series.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

September 09, 2009

TABLE OF CONTENTS:

As I mentioned in the beginning, I left off the last article explaining how to attach the “keyup()” and “keydown()” methods of the jQuery package to a simple link, which hopefully gave you a clear idea of how to handle these typical keyboard events with minor efforts. Thanks to the versatility offered by the library, it’s also feasible to fire up a predefined JavaScript function when a certain element within a web page gets focus.

To demonstrate this concept more clearly, below I included a basic script, similar to the hands-on examples developed in previous tutorials of the series. It shows how to handle a focus event in a very simple fashion.

The corresponding code sample 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 focus event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color:#000;

}

</style>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

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

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

</body>

</html>

As you can see from the above example, a brand new focus() method has been attached to a simple link. When the link receives focus, the method displays an alert box on screen, before performing a redirection to Devshed’s front page. In this concrete case, the example speaks for itself, so you shouldn’t have major problems understanding how it works.

Okay, now that you've learned how to handle a simple focus event by using the handy methods provided by the jQuery library, it’s time to explore some other useful methods that come packaged with it. Therefore, in the forthcoming section, I’m going to teach you how to develop another illustrative JavaScript application. This one will be capable of reacting to a “blur” event, thus behaving inversely to the hands-on example that you just learned.

To see how this JavaScript application will be developed in a few simple steps, please click on the link that appears below and keep reading.

Next: Using the blur() method >>