Introduction to JQUERY – Playing with the blur() method and its Applications

Guest Posts Paolo Nikko Nuñal

In our last tutorial, we discuss about the focus() method and how it works when you input something on an input box. In this tutorial we are going to tackle about on how the blur() method works when you actually unfocused an input box. The blur event occurs when an element loses its focus. It also attaches a function to run when a blur effect.

Syntax:

$(selector).blur()

or

$(selector).blur([FUNCTION])

FUNCTION - (OPTIONAL) Calls the function to run where the blur event occurs.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
        $("input").blur(function(){
              alert("Lost focused");
        });
});
</script>
</head>
<body>
Name: <input type="text">
Age: <input type="text">
Enter something and move to another input box.
</body>
</html>


From the code above, once you click on any of the input box and move to another HTML element, the blur() method will automatically trigger. This is useful if you want to have something done when a user loses focus on something. Some web developers use the blur() method in creating animated CSS animations most especially in triggering events when the user is losing its focus. You can also use this on drop down's and other HTML events.