Home Tutorial Jquery jQuery focus event

 
 

Share on Google+Share on Google+
jQuery focus event
Posted on: July 30, 2010 at 12:00 AM
Advertisement
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

Advertisement

Related Tags for jQuery focus event:


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.

Posted on: July 30, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com