LATEST #JQUERY NEWS

How to Use jQuery’s .blur() Method


jQuery’s .blur() method isn’t exactly what it sounds like — the word “blur” in this context should be taken as more of a figurative term than a literal one. The .blur() method doesn’t actually apply a blur effect to any elements, it simply refers to when an element was in focus and then becomes out of focus. So if a text input element was in focus for example, perhaps because a user was writing in it or filling it out, and then they click anywhere outside of that input, it becomes out of focus. When this happens, you can use the .blur() method to trigger an action or an event.

Your HTML may look something like this:

Enter your email address:

<input type="text" class="email">

Now let’s say you want that element to fade away when it becomes out of focus, here’s the jQuery code you could use for that:

$(".email").blur(function(){
   $(this).fadeOut();
})

.fadeOut is only one of dozens of options that can be used in this scenario. Other popular methods to use when an item becomes out of focus are alert(), .toggle(), or .hide().