Многострочный текст
Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.
Синтаксис создания поля следующий.
Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| cols | Ширина поля в символах. |
| disabled | Блокирует доступ и изменение элемента. |
| maxlength | Максимальное число символов текста, которое можно ввести. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| readonly | Устанавливает, что поле не может изменяться пользователем. |
| rows | Высота поля в строках текста. |
| wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 6.1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Пример 1. Текстовое поле
HTML5 IE Cr Op Sa Fx
Текстовое поле Введите ваш отзыв:
Результат примера в браузере Chrome показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
Дополнительно поле может находиться в двух состояниях — блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).
 |
 |
| Internet Explorer | Opera |
 |
 |
| Chrome | Firefox |
Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.
Пример 2. Поле для чтения
HTML5 IE Cr Op Sa Fx
Поле для чтения Учтите, что поле для чтения по своему виду не отличается от обычного текстового поля, но пользователь не сможет в него ничего добавить. Так что используйте его осмотрительно, чтобы не вводить людей в заблуждение.
Как сделать чтобы input растягивался по тексту
Поле представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Между тегами можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис
Атрибуты
accesskey Переход к полю с помощью сочетания клавиш. autofocus Автоматическое получение фокуса. cols Ширина поля в символах. disabled Блокирует доступ и изменение элемента. form Связывает текстовое поле с формой по её идентификатору. maxlength Максимальное число введенных символов. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. placeholder Указывает замещающийся текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. rows Высота поля в строках текста. tabindex Порядок перехода между элементами при нажатии на клавишу Tab. wrap Параметры переноса строк.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег TEXTAREA Введите ваш отзыв:
Ширина input в зависимости от содержимого
Можно ли сделать чтоб ширина(width) input автоматически подстраивалась под длину строки от в среднем это будет 10 — 50 симвлов. Да можно конечно сделать сразу размер на макс 50 символов, но хочу чтоб все было компактно
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
ширина pre в зависимости от содержимого
всем привет как сделать так, чтобы ширина pre была равна содержимому. я задаю фон pre, она.
Ширина контейнера в зависимости от содержимого
Имеем блок <div <h3>Хидэр</h3> .
Плавающая ширина блока div в зависимости от содержимого
Здравствуйте, помогите красиво решить задачу, которая прикреплена к вложению Моё решение ниже.
ширина блока в зависимости от его содержимого. как?
<div технологии"</div> что надо сделать для .head что бы длина блока.
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
rodigy,
input type="text" size="10" maxlength="50" onkeydown="size=value.length||10" onkeyup="onkeydown()" onkeypress="onkeydown()" onchange="onkeydown()">
90 / 40 / 17
Регистрация: 24.10.2015
Сообщений: 574
А на css невозможно что ли??
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
rodigy, сомневаюсь. CSS пока не дорос до обработки событий клавиатуры.
Регистрация: 24.05.2017
Сообщений: 1
Отличное решение, спасибо Вам большое! Подскажите пожалуйста — в зависимости от чего генерируется начальная ширина? Ну то есть там почему-то внутри инпута справа большой отступ остается даже при наборе текста
И можно ли сделать так, чтобы была минимальная ширина? Просто если начинать набирать текст, то активный инпут как-бы резко «схлапывается» до одного символа + этот непонятный отступ справа
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
Mag_Lenny, это очень хороший вопрос. Сам как-то искал. Так и не нашел. В спецификации пишется, что браузер использует при анализе и рендеринге какое-то правило, чтобы убедиться что все символы будут видны. ПРУФ. Может поэтому.
Добавлено через 49 минут
rodigy, Mag_Lenny, нашел решение лучше
input type="text" onkeydown="this.style.width = ((this.value.length + 1) * 8) + 'px';">
Добавлено через 2 минуты
Но к сожалению, с атрибутами maxsize и size — опять пустое пространство после строки.
Добавлено через 11 минут
А если лишний плагин не в тягость, то есть отличное решение на jQuery =>ТЫК
90 / 40 / 17
Регистрация: 24.10.2015
Сообщений: 574
Сообщение от Mag_Lenny 
Подскажите пожалуйста — в зависимости от чего генерируется начальная ширина?
Возможно предустановленные стили браузера, попробуйте сбросить
Добавлено через 14 минут
Сообщение от Qwerty_Wasd
Но к сожалению, с атрибутами maxsize и size — опять пустое пространство после строки.
Отступы появляются если удалять символы, т.к. на каждое нажатие клавиши( и backspace в том числе) ширина увеличивается, лучше использовать oninput
Добавлено через 4 минуты
и умножение на 7 лучше подходит нет нарастающей длины, но это уже от шрифта наверно зависит
Добавлено через 1 минуту
может позднее набросаю скрипт для начальной минимальной ширины без схлопывания
dev — investigator
2151 / 1496 / 651
Регистрация: 16.04.2016
Сообщений: 3,696
Сообщение от rodigy
Возможно предустановленные стили браузера
Сообщение от rodigy
это уже от шрифта наверно зависит
— точно зависит
Вот работающий пример(наклеен div, меняем его ширину, с size’ом уже надоело играться. Толку никакого)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
html lang="en"> head> meta charset="utf-8" /> script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">/script> style> .input, .input-buffer < font-family: Arial, Verdana, sans-serif; font-size: 14px; letter-spacing: 0.05em; >.input < width: 100px; min-width: 100px; >.input-buffer < position: absolute; top: -1000px; left: -1000px; visibility: hidden; white-space: nowrap; >/style> /head> body> input type="text" class="input"> div class="input-buffer">/div> script> var $input = $('.input'), $buffer = $('.input-buffer'); $input.on('input', function() < $buffer.text($input.val()); $input.width($buffer.width()); >); /script> /body> /html>
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Тег input авто ширина по горизонтали в зависимости от контента
что нужно: есть тег input, в который я ввожу данные, но как сделать чтобы он был такой ширины, как.
Одинаковая ширина для полей input text & input password
Никак не получается выровнять ширину двух тектовых полей: input type=’text’ и input.
Одинаковая ширина для полей input text & input password
Никак не получается выровнять ширину двух тектовых полей: input type=’text’ и input.
Изменение input в зависимости от значения другого input-а
Добрый день. Нужна помощь,я javascript почти не знаю, а есть задача: в форме input пользователь.
Как сделать адаптивный по высоте/ширине инпут
Рано или поздно вы получите от дизайнера макет, где встретится он — с виду вроде бы обычный текстовый инпут, а на деле, меняющий свою ширину или высоту, в зависимости от содержимого. Хорошие новости — отчаиваться не будем, это возможно. Причем, возможно достаточно разнообразными способами, об одном из них сегодня и поговорим.
Проблема
Прежде чем кидаться решать проблему — ее нужно осознать. С чего бы начать? Все зависит от поставленной вам задачи. Например: если требуется, чтобы инпут расширялся в ширину — это одна проблема. Если нужно чтобы он рос в высоту — это проблема другая. А если нужно чтобы сразу во все стороны, тут можно начинать страдать, дело-то непростое.
Главная проблема состоит в том, что элементы ввода не умеют растягиваться по своему содержимому. Это очень досадно и конечно мир был бы лучше, если бы они умели, но увы. Более того, однострочное текстовое поле — input вообще бессмысленно растягивать в высоту, содержимое все равно не ляжет в несколько строк, так уж он устроен. Поэтому дальше начинаются любимые фронтендерами лайфхаки.
Варианты решения
Самый первый, приходящий в топ выдачи гугла — это просто взять и заменить инпут на div с атрибутом contenteditable — и вот оно, проблема решена! Вот вам адаптивный по высоте/ширине див и редактируемое содержимое. Но если для вас (как и для меня) это не вариант, то смотрим дальше.
Следующий вариант не назовешь слишком изящным, но работающий вот что важно. Основан на том, что где-то позади самого текстового поля мы прячем невидимый блок, куда дублируем содержимое текстового поля при любом изменении. Блок изменяет свои размеры по содержимому, мы вычисляем их с помощью ява-скрипта и присваиваем текстовому полю. Если вас не смущает дополнительный мусор на странице в виде такого вот костыля — смело можно брать на вооружение.
Ну и третий вариант, который мне больше всего пришелся по душе — это все-таки вычислять содержимое текстового инпута и адаптировать его ширину/высоту, чтобы все помещалось. Давайте на него посмотрим чуть более внимательно.
Выбираем правильный инпут
Прежде всего, понадобится заменить input на textarea. Поскольку инпуты бесполезно наращивать в высоту, лучше сразу возьмем многострочное поле и будем делать вид, что это однострочный инпут.
Добавляем немного стилей, чтобы замаскировать истинную сущность нашего текстового поля.
.textarea
Тут следует обратить внимание на три обязательных параметра, без которых ничего не сработает: box-sizing, height, min-height.
box-sizing: border-box
В обязательном порядке box-sizing должен быть в значении border-box, чтобы когда вы добавите паддинг в текстовом поле, а вы его обязательно добавите, он не увеличивал дополнительно высоту или ширину текстового поля, а откладывался бы вовнутрь.
height и min-height (width и min-width)
Тут все просто: height — чтобы изначально textarea выглядела бы как input. min-height — чтобы при сбросе значения высоты текстовое поле не прыгало, а оставалось минимально необходимого размера. Все это справедливо и для свойств width и min-width.
Немного теории
Принцип действия очень простой. У каждого DOM-элемента, который может содержать контент, есть readonly-свойство scrollHeight (scrollWidth) которое и содержит так нужную нам, истинную высоту элемента, такую, при которой все содержимое этого элемента будет видно пользователю. Все, что нам требуется — при изменении текстового поля, вычислять значение scrollHeight/scrollWidth и присваивать его текстовому полю.
А для того, чтобы текстовое поле могло еще и возвращаться к своему исходному виду, перед изменением, будем сбрасывать установленную ранее высоту до нуля, для того чтобы свойство scrollHeight корректно бы показало нам, есть ли контент, не умещающийся в текстовом поле.
Немного vanilla JS-практики
Специально не использовала никаких фреймворков, для большей гибкости. Любым удобным способом получаем текстовое поле со страницы и добавляем обработчик события input
const textareaHeight = document.getElementById("text"); textareaHeight.addEventListener("input", (event) => < textareaHeight.style.height = 0; textareaHeight.style.height = textareaHeight.scrollHeight + "px"; >)
Это ввод с клавиатуры. Не стоит забывать, что текстовые поля бывают заполняются автоматически, извне. Для этого добавляем отдельный метод вставки значения:
function setValue(text: string)
Ну и давайте для ширины тоже сделаем. Все то же самое, только тут уже берем input, и высоту меняем на ширину.
const textInput = document.getElementById(«text»); textInput.addEventListener(«input», (event) => < textInput.style.width = 0; textInput.style.width = textInput.scrollWidth + "px"; >) function setValue(text: string)
Результат
Вот такие поля получились. Несложно и недолго.
Адаптивный инпут, растущий в высоту:
Адаптивный инпут, растущий в ширину:
Angular Директива
Для тех, кто дочитал аж до сюда — бонус. Если лень самостоятельно упаковать все это в директиву, я уже все сделала за вас, смотрите:
@Directive(< selector: "[adaptiveInputDirective]" >) export class AdaptiveInputDirective implements OnInit < @Input() horizontal: boolean; constructor(private element: ElementRef) <>ngOnInit() < if (this.horizontal) < this.element.nativeElement.style.whiteSpace = "nowrap"; >> @HostListener("ngModelChange", ["$event"]) onChange(): void < const input = this.element.nativeElement; if (this.horizontal) < input.style.width = 0; input.style.width = input.scrollWidth + "px"; >else < input.style.height = 0; input.style.height = input.scrollHeight + "px"; >> >
Здесь используется уже знакомый вам декоратор @HostListener. А если еще не знакомый, то обязательно почитайте статью об этом.
Пример использования:
Да, можно обойтись одним элементом — textarea. Просто, если нужна адаптивность в ширину — добавим CSS-свойство white-space: nowrap — запрет на перенос строк.
В остальном, все, о чем говорили, плюс — настраиваемый параметр horizontal указывающий что тянуть, ширину или высоту. Выбирайте нужный вариант и ни в чем не отказывайте своему дизайнеру.
Приходилось вам сталкиваться с подобной задачей? Как решали?