How to make text input box resizable (like textarea) by dragging its right-bottom corner using jQuery?

Question

I would like to have (preferrably in jQuery) regular text input box which can be clicked and dragged by its right-bottom corner (eg like textareas have in Chrome) and resized by user ?

Can't find any jQuery plugin already implementing this. Can anybody give me hint if something like this exists or how could it be easily implemented ?

Thank you in advance.

EDIT: I want to be resizable similarly like textarea is in Chrome...

Answer 1

You don't need jQuery to handle this. What you need is css.

#yourTextInput{
resize:both;
}

This will allow your text input to have the resize option on the right

Answer 2

Anno 2016 it is a bit more complicated. You need to wrap the <input> in an "inline-block" that you made resizable:

 .resizable-input { /* make resizable */ overflow-x: hidden; resize: horizontal; display: inline-block; /* no extra spaces */ padding: 0; margin: 0; white-space: nowrap; /* default widths */ width: 10em; min-width: 2em; max-width: 30em; } /* let <input> assume the size of the wrapper */ .resizable-input > input { width: 100%; box-sizing: border-box; margin: 0; } /* add a visible handle */ .resizable-input > span { display: inline-block; vertical-align: bottom; margin-left: -16px; width: 16px; height: 16px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg=="); cursor: ew-resize; }

 <span class="resizable-input"><input type="text" /><span></span></span>

Answer 3

Have you looked at the jQuery UI resizable widget ?

Here is the source code for just the resizable example .

Answer 4

I made a variation on kay's answer, using the pseudo element ::after instead of a second span. in short:

.resizable-input { ... }
.resizable-input > input { ... }
.resizable-input::after { ... }
/* the last one used to be .resizable-input > span { ... } */

with html just:

<span class="resizeable-input"><input type="text"/></span>

See full code and see it in action here: https://jsfiddle.net/ElMoonLite/qh703tbe/

Also added input { padding-right: 0.5em; } input { padding-right: 0.5em; } so you can still resize it if it's value is full of text.

---

Still seems to work in 2019 in Chrome.
In Edge resize does not seem to work (but otherwise looks ok (graceful degradation)). Haven't tested other browsers yet.