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

2 comments:

  1. SarmadJune 12, 2013 at 10:53 PM

    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.

    ReplyDelete
  2. Timothy1995July 21, 2014 at 5:52 PM

    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);
    });});

    ReplyDelete