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

问题

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

回答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

回答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>

回答3:

Have you looked at the jQuery UI resizable widget?

Here is the source code for just the resizable example.

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

来源：https://stackoverflow.com/questions/8572190/how-to-make-text-input-box-resizable-like-textarea-by-dragging-its-right-botto

标签

javascript

jquery

input

textarea

resizable