Expand a TextBox on Focus using jQuery

Here’s how to animate and expand the height and width of a TextBox when it receives focus. After a delay, the TextBox returns to its normal size

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Expand a TextBox on Focus in jQuery</title>
    <style type="text/css">
    .txt   
    {
        width:100px;
        height:15px;
    }
    </style>
    <script  type="text/javascript"
        src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
    </script>

<script type="text/javascript">
    $(function () {
        $(".txt").focus(function () {
            $(this).animate({           
                width: '200px',
                height: '40px'
                },
               "slow"
            )
            .delay(2000)
            .animate({
                width: '100px',
                height: '15px'
                },
                "slow"
            );
        });
    });
</script>
</head>
<body>
    <div>       
        <input class="txt" type="text"
        value="Some Text Some Text Some Text" /><br />
    </div>
</body>
</html>

The code is self explanatory. We first animate the height and width of the TextBox and increase its size. We then set a delay() and then animate the height and width back to what it was earlier.

See a Live Demo

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

2 comments:

Sarmad said...: can i do this in my blogger post? I dont want the box that is editable by the visitor, rather i want it focus when user points it with cursor.; June 12, 2013 at 10:53 PM
Timothy1995 said...: This works and its simple http://jsfiddle.net/unknown601/E2KFS/

$(document).ready(function () {
$("input[type=text]").focus(function () {
$(this).animate({
width: "160px"
}, 100);
});
$(this).focusout(function () {
$("input[type=text]").animate({
width: "130px"
}, 100);
});});; July 21, 2014 at 5:52 PM