X

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().

Recently Published

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...