How to make a text input field mutable (e.g. textarea) by dragging its lower right corner using jQuery?

Question

I would like to have (preferably in jQuery) a regular text input block that you can click and drag on its lower right corner (for example, like in a text box in Chrome) and resize the user?

Cannot find a jQuery plugin that already implements this. Can someone give me a hint if something like this exists or how can it be easily implemented?

Thanks in advance.

EDIT: I want to resize similarly to textarea 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 a resize option on the right.

Answer 2

Anno 2016 is a little trickier. You need to wrap the <input> in a "built-in block" that you made mutable:

 .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 resizable only .

Answer 4

I made a kay answer option using the ::after pseudo-element instead of the second range. in short:

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

See the 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; } input { padding-right: 0.5em; } input { padding-right: 0.5em; } so you can still resize it if its value is filled with text.

---

Looks like it still works in 2019 on Chrome.
In Edge, resizing doesn't seem to work (but otherwise it looks fine (gradual deterioration)). Other browsers have not tested yet.

Answer 5

No, this is damn cool, I never knew it was possible, before it is pretty crazy what you can do with CSS, it’s amazing, I never knew it was possible !!