.blur()
In this chapter you will learn:
- Syntax and Description for blur event
- How to blue user input
- How to use blur event to change the style for the next element
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() {
$('#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><!--from j a va 2s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function () {
$(this).blur();
});
});
</script>
</head>
<body>
<body>
<p><input type="text" /> <span>focus event fire</span></p>
</body>
</html>
blur the next
The following code uses the blur event to trigger the change to the element next to the event source element.
<html><!-- java2s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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>
Next chapter...
What you will learn in the next chapter: