How do I make the textbox slippery to the left?

Question

How do I make the textbox slippery to the left?

Here's the JS script

Or find below script:

<script>
        $('#box').focus(function()
{
    /*to make this flexible, I'm storing the current width in an attribute*/
    $(this).attr('data-default', $(this).width());
    $(this).animate({ width: 150 }, 'slow');
}).blur(function()
{
    /* lookup the original width */
    var w = $(this).attr('data-default');
    $(this).animate({ width: w }, 'slow');
});
</script>

And HTML

<input type="text" id="box"  style="width: 100px;" />

I only need to increase the width of the textbox to the left, not the right. How to do it.

+3

javascript

Twinkle Dec 21 14 at 15:02

source to share

1 answer

Gerd K · Accepted Answer · 2014-12-21T15:11:42+0000

The script only changes the width of the element, it doesn't grow to the right. But as the element is aligned to the left, it will expand to the right.

If you want to grow it to the left, you have to place it in the container and align it to the right.

See example:

<div style="width: 200px; text-align:right">
   <input type="text" id="box" style="width: 100px;" />
</div>

http://jsfiddle.net/9SSg3/420/

How do I make the textbox slippery to the left?

Here's the JS script

More articles: