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

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

11 голосов
/ 20 декабря 2011

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

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

Заранее спасибо.

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

Ответы [ 4 ]

14 голосов
/ 20 декабря 2011

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

#yourTextInput{
resize:both;
}

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

2 голосов
/ 20 мая 2016

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>
1 голос
/ 20 декабря 2011
0 голосов
/ 04 апреля 2019

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

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

с html просто: 

<span class="resizeable-input"><input type="text"/></span>

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

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

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

...