jQuery blur event


 

jQuery blur event

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

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

Ads