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:

Of course, if you paid close attention to the examples developed in previous sections, then you may have already guessed that jQuery comes with a method designed specifically for handling blur events. And you’re correct! Fortunately, the library incorporates an intuitive “blur()” method, which can be easily tied to any element within a web document.

The following code sample demonstrates how to utilize this method in a concrete situation. Here it is:

<!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 blur event</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

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

color:#000;

}

</style>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

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

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

</body>

</html>

After analyzing closely the above hands-on example, you’ll have to agree with me that handling blur events with the jQuery framework is actually a no-brainer process that can be tackled with minor efforts. As you can see from the prior code sample, the blur() method has been tied to a link that points to “Devshed.com.” This means that when this element gets blurred for whatever reason, it will pop up an alert box on screen before performing the redirection process. That certainly wasn’t too hard to grasp, right?

At this point, you hopefully understand how to process a simple blur event with jQuery. I think it's time, therefore, to explore other useful characteristics of the library.

In the last section of this article, I’m going to explain how to build a primitive JavaScript application that detects the submission of web forms. You've probably done this tens, even hundreds of times before.

However, in this specific case, this common task will be performed via the API provided by jQuery, so if you’re interested in learning how this will be done, please jump ahead and read the following section. It’s only one click away.

Next: Introducing the submit() method >>