Increase textbox width onclick by jQuery

Hello Friends,

Today i want to share one small example of increase textbox width onclick by jquery. Actually to increase width of textbox we will animate textbox with jquery.

We will use following code to animate textbox.

        $(document).ready(function ()
            $('#txtSearch').focus(function ()
                /*to make flexible, store the current width in an attribute*/
                $(this).attr('width-default', $(this).width());
                $(this).animate({ width: 250 }, 'slow');
            }).blur(function ()
                /* restore the original width */
                var w = $(this).attr('width-default');
                $(this).animate({ width: w }, 'slow');

Replace txtSearch with your textbox name and also change width in animate as appropriate your width. Enjoy!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>