jQuery focus event


 

jQuery focus event

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

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

jQuery focus event

In this tutorial, we will discuss about how to handle focus event of jQuery. In this example, 2 text field and one password field is given. When we click on first text field or password field , a message displays along side it. This message fade out in 1000milli seconds.When we click on 'Text field 2' a alert box displays. These effects is due to '.focus()' method of jQuery.  

focusEvent.html

<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<p><input type="text" value="Text Field 1"/>
<span><font color="blue">Focus on text field</font></span></p>
<p><input id="flag" type="text" value="Text Field 2" /></p>
<p><input type="password" value="password"/>
<span><font color="blue">Focus on password field</font></span></p>
<p><font color="red">
Click on 'Text Field 1' or 'password' above to see focus effect</font></p>
<p><font color="red">Click on 'Text Field 2' to see alert box</font></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
$("input[type=password]").focus(function(){
$(this).blur();
});
$('#flag').focus(function() {
alert('focus is on "Text Field 2"');
});
</script>
</body>
</html>

OUTPUT

When we click on 'Text Field 1' :

When we click on 'Text Field 2' :

Download Source Code

Click here to see demo

Ads