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 type, it will expand to like 150px in width.

Is it possible to do this?

Thanks.

Answer 1

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

For reference, see jQuery Animate docs.

Answer 2

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 3

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

Here's my jsFiddle:

https://jsfiddle.net/qo95uquv/

Tom

Answer 4

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