.blur()

Syntax and Description

blur event fires when element loses focus.


.blur(handler)         
.blur()

bind an event handler to the blur event, or trigger that event on an element. handler is a function to execute each time the event is triggered. .blur returns the jQuery object, for chaining purposes.

.blur(handler) is a shortcut for .bind('blur', handler). .blur() is a shortcut for .trigger('blur').

We can trigger the event when another element is clicked.


$('#other').click(function() {
/*from   w  w  w .ja  va2s  .c om*/
 $('#target').blur();

});

Blur user input

The following code stops people from writing in text input boxes. It calls blur method in the focus event handler, which means whenever the text box gets the focus it will force it to lose it.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w  ww . j av  a  2 s  . co  m-->
            $("input").focus(function () {
                  $(this).blur();
            });
        });
    </script>
  </head>
  <body>
    <body>
     <p><input type="text" /> <span>focus event fire</span></p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

blur the next

The following code uses the blur event to trigger the change to the element next to the event source element.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w  w  w  .  ja v  a2 s.co  m-->
             $("input").blur(function () {
                $(this).next("span").css('color','red');
             });

        });
    </script>
  </head>
  <body>
    <body>
       <p><input type="text" /> <span>blur fire</span></p>
       <p><input type="password" /> <span>blur fire</span></p>

    </body>
</html>

Click to view the demo

The code above generates the following result.