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

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.