Onclick Expand Textbox Width

Question

I want to use jQuery to expand the width of a input textbox during onclick.

For example, if the input has a default width of 100px, when the user clicks in it to ty

Answer 1

I'd like to build on @wsanville's example by removing the extra step on saving the original size. Animation also takes string values like '+=50' or '-=50' for increasing/decreasing the width.

See in in action on jsfiddle

$('#box').focus(function()
{
    $(this).animate({ width: '+=50' }, 'slow');
}).blur(function()
{
    $(this).animate({ width: '-=50' }, 'slow');
});

Answer 2

sure. Lets say you have

<input id="mytextbox" />

you can do

$("#mytextbox").focus(function(){
   $(this).width(150)
});

Answer 3

Here a working example based on @wsanville's example with the requested delay. (Note I also added an effect to return it on loss of focus, you can remove that easily)

Working Example

**edited the size of the textbox

Answer 4

I know this is a bit late to the party, but if anyone wants a pure CSS solution that uses the :focus attribute.

#textbox {
  width:100px;
  transition: 0.5s;
}

#textbox:focus {
  width:150px;
  transition: 0.5s;
}

He's my jsFiddle:

https://jsfiddle.net/qo95uquv/

Tom

Answer 5

<input type="text" id="tbText" size="30px"/>    

<script type="text/javascript">
    $(document).ready(function() {
        $('#tbText').focus(function() {
            $('#tbText').css("width", "250px");
        });
        $('#tbText').blur(function() {
            $('#tbText').css("width", "150px");
        });
    });
</script>

Answer 6

Here's an updated example on jsfiddle that animates, and returns to the default size on blur.

For reference, see jQuery Animate docs.