Share on Google+Share on Google+

jQuery focus event

Ads
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

Advertisements

Posted on: July 30, 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