12
Aug
2012

Expand a text box on focus using jQuery

Posted in: jQuery , , No Comments

jquery_logo
You may have seen on many websites that search box expands on focus and bring back to initial width on removing focus. In this jQuery tutorial we will learn how to expand a text box on focus and bring back to its initial width on removing focus.

Step 1:
HTML code for a text box

<input id="textbox" type="text" />

Step 2:
Call jQuery library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3:
Now add following jQuery code.

<script type="text/javascript">
$(document).ready(function() {
$("#textbox").css({width:'200px', height: '40px'});
$("#textbox").focus(function() {
$(this).animate({width: '300px', height: '70px'});
});
$("#textbox").blur(function() {
$(this).animate({width: '200px', height: '40px'});
});
});
</script>

In above jQuery code you can change width and height to expand.
Done!!!
Check live demo

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply