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 (e.g. 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...

Upas

Do you wish for <input type="text" /> to be resizable? Or would you like the <textarea> behavior of Chrome and Firefox replicated to all browsers? – Mccaskill

Sorry for my bad explanation. I want <input type="text" /> to be resizable. Example of this behaviour was textarea in Chrome.... – Upas

Resizing an <input type="text" /> element is pointless, you won't magically convert it to a textarea, it'll remain a single line element. Unless you are looking for horizontal extension which might be usefull in some cases. – Nerveracking

@Nerveracking Yes, I'm looking for horizontal extension.... – Upas

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

Eightieth

Wow, thank you, such an easy and elegant solution. I didn't know about this CSS feature. Thanks. – Upas

Has something changed in the specifications of resize CSS feature ? It doesn't work anymore on input elements, example: jsfiddle.net/cbw7q/1 Anybody has any information about that ? – Upas

resize does NOT apply to "Inline elements or Block elements for which the overflow property is set to visible". Input is an inline-block-element. – Cuspidation

Does NOT work on <input>! – Puerile

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>

Pomelo

If I change the span line to Hello <span class="resizable-input"><input type="text" /><span> World, it does not behave as I would like it to (at least not with Firefox). Specifically, I only see he "W" from World, appearing with the drag image. Is it possible for the resizing to "push" and "pull" the inline elements that follow? – Sectarianism

@alex.jordan: thank your for notifying me! There was a typo: the latter <span> should be </span>. – Pomelo

Thanks! I should have caught that myself. Blurry eyes :) And thanks for the answer itself. I have an application that I will now look into using this. – Sectarianism

The first post was actually correct, and then several "typo" fixes lost the 2nd span element. fixed now. – Chromoprotein

@MoonLite: Thank you very much! – Pomelo

Answer 3

Have you looked at the jQuery UI resizable widget?

Here is the source code for just the resizable example.

Julietjulieta

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

Chromoprotein