Как сделать поле ввода текста изменчивым (например, textarea), перетащив его правый нижний угол с помощью jQuery?

Я хотел бы иметь (предпочтительно в jQuery) обычный текстовый блок ввода, который можно щелкнуть и перетащить по его правому нижнему углу (например, как в текстовом поле в Chrome) и изменить размер пользователя?

Невозможно найти плагин jQuery, уже реализующий это. Может ли кто-нибудь дать мне подсказку, если что-то вроде этого существует или как его можно легко реализовать?

Спасибо заранее.

РЕДАКТИРОВАТЬ: Я хочу изменить размер аналогично textarea в Chrome...

Ответ 1

Вам не нужен jQuery, чтобы справиться с этим. Что вам нужно - css.

#yourTextInput{
resize:both;
}

Это позволит вашему текстовому вводу иметь параметр изменения размера справа

Ответ 2

Anno 2016 это немного сложнее. Вам нужно обернуть <input> во "встроенный блок", который вы сделали изменяемым:

.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

Вы посмотрели на jQuery UI изменяемый размер виджета?

Вот исходный код только для изменяемого размера.

Ответ 4

Я сделал вариант ответа kay, используя псевдоэлемент ::after вместо второго диапазона. короче:

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

Смотрите полный код и смотрите его в действии здесь: https://jsfiddle.net/ElMoonLite/qh703tbe/

Также добавлен input { padding-right: 0.5em; } input { padding-right: 0.5em; } так что вы все равно можете изменить его размер, если его значение заполнено текстом.

Похоже, все еще работает в 2019 году в Chrome.
В Edge изменение размера, похоже, не работает (но в остальном выглядит нормально (постепенное ухудшение)). Еще не тестировали другие браузеры.

Ответ 5

Нет, это чертовски круто, я никогда не знал, что это возможно, до того, как это довольно безумно, что вы можете делать с CSS, это удивительно, я никогда не знал, что это возможно !!