How To Use jQuery Blur()

jquery blurThe blur event is sent to a DOM (Document Object Model) element when it loses focus.  In other words, the blur event occurs when an element loses focus.  The jQuery blur() method lets you bind an event handler to the JavaScript blur event, or directly trigger the event on an element at your discretion.  There is a corresponding event called focus, which is triggered when an element gets focus.  We’ll talk about both events in more detail below.

New to jQuery? Learn the Basics Here

The Blur() Method

The blur method lets you attach a function to the event that will be executed when the event occurs in relation to a given element.  The event (or action) here is loss of focus.  So, when an input field loses focus, a function can be invoked that performs whatever action the application calls for.

$(“input”).blur( function ()  { “do some useful work” });

So when the “input” field loses focus, the blur method causes the attached function to execute – nice and clean and simple.  The blur() method can also trigger the blur event directly, as shown below.

$(“your selector”).blur();

The blur event is triggered for the selected element or elements.

Return Focus Using the Focus() Method

Focus(), the focus method, does for the focus event what blur() does for the blur event.  Focus() lets you attach a function to the focus event that will be run when the event occurs.  The focus event is triggered when an element gains focus.  That can happen from a mouse click or by navigating to the element by tabbing.  The signatures for the focus() method look just like those of the blur() method.  See below.

$(“input”).focus( function ()  { “do some focus-related useful work” });

The focus() method can trigger the focus event directly on an element as shown here:

$(“input”).focus();

 

jQuery has a related and slightly more powerful method called focusout().  As you may have guessed, the focusout() method can be invoked when the focusout event occurs on a given element.  The focusout event occurs when an element loses focus. Sounds just like blur()?  Well, it is except that the focusout() method triggers if the element or any of its child elements loses focus (learn more about DOM here).  So focusout() could be used to control a whole DIV, for example, by changing (via its attached function) some visual part of the div when any element in the DIV loses focus.  For example:

$(“DIV”).focusout( function ()  { $(this).css(”change the background color” });

The focusout() method can also trigger the focusout event directly on an element as shown here:

$(“input”).focusout();

Where would focusout() be without a focusin()?  It wouldn’t be right.  So, sure enough you have a focusin() method whose definition might be evident to you if you’ve read this far.  The focusin() method is triggered by the focusin event, which occurs whenever an element (or any element inside it) gets focus.  An element gets focus, once again, either by a mouse click or a tab-induced navigation to the element.   You can imagine a usage for focusin() very similar to the focusout() example just above.  So you can effect an entire DIV based on any element inside it getting focus.  Note that the focusin() signature is not supported, meaning that a function name is required when invoking the focusin() method.

The event methods mentioned so far are obviously not the only ones worth knowing about.  In fact, let’s look at a few more of them while we’re on the subject.

Change(), the change method, functions just like the event methods we already looked at.  A change event occurs whenever the value of an element is changed (form fields only).  The change event triggers the change() method which can specify a function to be performed.  The change() invoked with no function triggers the change event directly on the selected element.

Click(), the click method, functions the same way by either attaching a function to run when the event occurs on the element in question, or by triggering the event trigger when the method is invoked with no parameter like this: click().

The hover() method supports two functions to run when the mouse pointer hovers over the element in question.  The first function is run on the “mouseenter” event which occurs when the pointer enters the element.  The second function is run when the mouse leaves the element.   The method signature looks like this:

$(“selector”).hover(inFunction, outfunction)

You can see how easy it is to change the appearance of an element by hovering over it.

As you peruse the list of jQuery event methods, you’ll notice that there are a number of properties listed and described there too.  Don’t ignore them! Take a look and you’ll see there is valuable and critical information for the taking here.  For example, the “event.which” property returns which keyboard key was pressed for the event in question.  So you can access the property in the context of the keydown event being handled by the keydown () method.  As follows:

$(“input”).keydown(function(event) {$(“div”.html(“Key: + event.which);});

As you spend more time with jQuery you start to see the consistency and ease of use come shining through.  Use the power to make better pages!

To learn more about jQuery and its UI methods, take a class at Udemy.com.