1

Подскажите, как лучше реализовать следующий эффект: При вводе текста в поле с каждой новой строкой (или переносом текста) высота поля ввода (и, опционально, его родителя) увеличивается (до определённого предела).

Есть ли автоматические средства для реализации такого поведения?

Или требуется отслеживать ввод текста в поле, получать из него текст, определять размеры поля и выставлять новые размеры, такими чтоб не был прокруток?

1 ответ 1

1

Такое можно достичь с помощью Javascript. Взято c enSO с ответа:

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

3
  • В общем неплохо, с некоторыми допиливаниями (на максимальную и минимальную высоту) сойдет. Непонятно только откуда всегда берется небольшая прокрутка, как-будто не хватает несколько пикселей в высоту чтобы прокрутки не было. Тут, как я понимаю, тот же принцип что я описал выше - ловить ввод текст и перерассчитывать высоту
    – Zhihar
    Commented 16 мая 2018 в 14:58
  • @Zhihar А в каком это браузере скролл добавляется? А то я в Chrome такого не наблюдаю. Принцип такой же, который вы описали (тут, в принципе, вряд ли можно было бы по-другому сделать). Commented 16 мая 2018 в 15:19
  • в Chrome и добавлялся, удалось это побороть, когда полю добавил padding небольшой, так что непонятно, почему он немного скроллил.
    – Zhihar
    Commented 17 мая 2018 в 8:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.