Share on Google+Share on Google+

jQuery blur event

Ads
In this tutorial , we will discuss how to handle blur event of jQuery.

jQuery blur event

In this tutorial , we will discuss how to handle blur event of jQuery. In the below example , there are two input field ,when you click inside or change text of the  first input field and after it, you click on any other elements in the page ,it shows an alert box .The blur event is sent to an element when it loses focus. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

formBlur.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<form>
<input id="Flag" type="text" value="Input 1" />
<input type="text" value="Input 2" />
</form>
<div id="other">
Switch the handler
</div>
Click on first input field & after it, click out side.
<script>
$('#Flag').blur(function() {
alert('You clicked in other than first input field');
});
</script>
</body>
</html>

OUTPUT

When First input field loses focus :

Download Source Code

Click here to see demo

Advertisements

Ads

Posted on: July 29, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Ads

Advertisement