Тег HTML текстовая область, многострочное поле ввода
Тег в HTML используется для создания многострочного поля для ввода, другими словами, текстовой области.
Текстовое поле для ввода, созданное с помощью тега , не имеет ограничений по количеству вводимых символов.
Размеры textarea HTML регулируются с помощью атрибутов rows и cols . Атрибут тега rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.
По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать фиксированного размера, следует использовать CSS-правило resize: none; . Это отключит возможность растягивать область ввода.
Тег HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Примеры использования в HTML коде
HTML код текстовой области
с фиксированным размером (no resize textarea)
По умолчанию пользователь может изменять размер текстовой области (растягивать область ввода за край).
Для того, чтобы запретить изменение размера используйте CSS свойство resize . Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.
Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину при фиксированной высоте, используйте значения horizontal.
Отображение в браузере:
HTML код с фиксированной шириной и высотой
textarea[name="details"] <
resize: none;
>
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты тега textarea
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область.
Определяет ширину текстовой области. Ширина области рассчитывается в пикселях как ширина символа, умноженная на значение этого атрибута. Значение приблизительно равняется количеству символов моноширинного шрифта, которые должны занимать полную строку в текстовой области.
Логический атрибут. Если указан, делает текстовую область неактивной.
Данные текстовой области, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода текста в текстовую область.
Указывает на форму, к которой относится текстовая область. Используется, если находится вне HTML кода формы.
Если текстовая область находится внутри тега , то использовать атрибут form не нужно, текстовая область по умолчанию привязана к форме, внутри которой находится.
Определяет максимальное количество символов, которые пользователь может ввести в текстовую область. По умолчанию объем текста в текстовой области не ограничен.
Имя текстовой области. Используется при передаче данных формы на сервер. Значение (текст) текстовой области будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Текст, который будет отображаться внутри текстовой области, когда она не заполнена текстом. Обычно это описание того, что должен ввести пользователь, либо пример заполнения.
Логический атрибут. Если указан, пользователь не сможет изменить значение (текст) в текстовой области. Используется для создания текстовых областей, доступных только для чтения.
Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена.
Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения.
Определяет высоту текстовой области. В качестве значения необходимо указать количество строк, которые должны быть видны без прокрутки (скроллинга).
Определяет правила переноса строк:
Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина . Для использования этого значения необходимо указать атрибут cols.
Значение soft: символы переноса ставятся там, где их ставил пользователь. Таким образом текст из текстовой области, переданный на сервер в дальнейшем сможет растягиваться под ширину тега-контейнера. Значение по умолчанию.
Автоматическое растягивание textarea
Казалось бы, простая задача и, наверняка, кто-то когда-нибудь нечто подобное уже делал. К сожалению, те, что я нашел, оказались слишком сложными, включали заумные математические вычисления и не корректно работали, если блок с неким текстом изначально был скрыт. Давайте изучим лучший способ, который будет прост и решит проблему с первоначально скрытым полем для ввода текста.
Использование клонированного скрытого элемента
Элемент div, как вам известно, будет растягиваться, чтобы соответствовать высоте его содержания (при условии отсутствия обтекания или абсолютного позиционирования). Таким образом, чтобы получить высоту текстового поля, просто нужно сделать следующее:
- Взять содержимое, загруженное в textarea
- Создать невидимый клон DIV
- Назначить клону одинаковую ширину и типографские свойства, как у textarea
- Поместить содержимое в клон
- Получить высоту клона
- Сделайть у textarea такую же высоту как и у клона
Код
Одним из ключей к этому решению является CSS. Как уже упоминалось, невидимый клон должен иметь те же свойства, что и textarea. Это не только font-size и font-family, но и white-space и word-wrap.
Вот CSS для textarea:
textarea < width: 500px; min-height: 50px; font-family: Arial, sans-serif; font-size: 13px; color: #444; padding: 5px; >.noscroll
Обратите внимание, что я добавил отдельный класс с overflow: hidden , чтобы предотвратить появление прокрутки. Добавлять такое свойству элементу — не лучшее решение, так часть содержимого может быть не видна, но, поскольку я буду его добавлять изменяя высоту с помощью JavaScript, то все будет нормально. Этот класс будет добавлен в textarea JavaScript’ом, чтобы гарантировать, что если JavaScript выключен у пользователя в браузере, содержимое textarea можно будет поскроллить и мы все увидим.
Вот CSS, которые я буду применять к скрытому клону textarea:
.hiddendiv
Обратите внимание, я скрыл его от пользователя с помощью display: none .
Я также установил свойству white-space значение «pre-wrap». Это дает уверенность, что строки будут переноситься правильно, но все остальное будет предформатировано. Я также установить ширину равной ширине textarea и продублировал несколько типографских свойств. Также я даю клону и текстовой зоне min-height , так что она всегда стартует на стандартной используемой высоте.
Теперь, набросаем по-быстрому код на jQuery:
$(function() < var txt = $('#comments'), hiddenDiv = $(document.createElement('div')), content = null; txt.addClass('txtstuff'); hiddenDiv.addClass('hiddendiv common'); $('body').append(hiddenDiv); txt.on('keyup', function () < content = $(this).val(); content = content.replace(/\n/g, '
'); hiddenDiv.html(content + '
'); $(this).css('height', hiddenDiv.height()); >); >); Этот код предполагает, что у нас один textarea на странице. Если вам нужно обработать несколько textarea, то нам придется поправить первую строку внутри функции.
Я динамически изменяю высоту на основе JQuery-события в keyup . Вы можете легко изменить это, чтобы ответить на запрос Ajax, если загружаете содержимое этим способом.
Использование keyup , тем не менее, хорошее решение, потому что наиболее вероятная причина, по которой нужно автоматически изменять высоту textarea — ввод пользователем данных.
А что насчет IE8?
Увы и ах, наш распрекрасный скрипт отказался корректно работать в IE8. Если вы до сих пор пользуетесь им, то добавьте следующие строки в наш код:
// фикс проблемы с innerHTML в IE content = content.replace(/\n/g, '
'); Но даже после добавления этой строки, у нас по-прежнему проблема: длинная, непрерывная строки текста не повлияют на высоту текстового поля. Это, на самом деле, не является большой проблемой: просто добавьте для клона textarea CSS-свойство word-wrap: break-word .
Превращаем в jQuery-плагин
Наш скрипт с автоматическим растягиванием textarea может быть легко превращен в плагин:
(function($) < $.fn.textareaAutoresize = function(options) < //код, отвечающий за автоматическое //увеличение textarea >>)(jQuery);После чего, нам остается вызвать его $(«.autoresize»).textareaAutoresize(); и наслаждаться. Скрипт превосходно работает, пока мы вводим в textarea текст. Если же мы вставим теги, да еще со стилями. догадываетесь, что произойдет? Правильно! Код внутри textarea подставится в наш клон, а поскольку он представляет собой блочный элемент, то его высота рассчитается с учетом стилей подставленных тегов. Давайте внесем изменение в наш скрипт, добавив замену символов < и >на, допустим, * :
var content = $(this).val() .replace(/[]/g, '*') .replace(/\n/g, '
');Послесловие: оптимизация кода
Как вы должно быть заметили, код наш не совсем идеален в плане быстродействия. Виной всему. да-да, строка var content = $(this).val().replace(/[]/g, ‘*’).replace(/\n/g, ‘
‘); . Прежде чем делать перебор строки посимвольно в поиске переноса на новую строку ( replace(/\n/g, ‘
‘) ) было бы неплохо определить версию браузера и запускакть перебор только если это IE8 и ниже. Например, добавляем в объект settings свойство ie8:
var settings = $.extend(< hiddenDiv:null, ie8:jQuery.support.opacity //IE8 и ниже не поддерживают css свойство opacity >, options); После этого пишем if(!settings.ie8) content.replace(/\n/g, ‘
‘); и отсекаем ресурсоемкую оперецию в современных браузерах.
Тем не менее, наш скрипт и так работает достаточно шустро, поэтому я не стал заморачиваться. Но, если у вас возникнут проблемы с быстродействием, вы знаете, что можно сделать.
Делаем textarea с автоматической высотой — краткий гайд
Как сделать поле для воода текста textarea, которое будет растягиваться по ширине контента. Используем CSS + HTML и совсем чуть-чуть JS.
Способом поделился пользователь Твиттера «Кричащий банан».
Предупреждая возражения, да, он не идеален, а в реплаях даже указали короткий код со Stack Overflow.
Однако способ из Твиттера весьма и весьма прикольный, отличается хитростью на грани с костыльностью и не требует вычислений.
Вот, что у вас получится:
Приступим. Сперва создайте обыкновенный блок div, а под ним расположите textarea.
В блок вставьте рандомный текст. Кричащий банан использовал Lorem Ipsum — классика.
Оба блока должны генерировать один и тот же текст. В местах, где строка должна переноситься на новый абзац в поле ввода, добавьте тэг br внутри блока div.
Для этой же разбивки в коде указываем text.split(/\r?\n/g) . Создаём компонент для разбивки, оборачиваем строки во фрагменты и не забываем указать тэг br.
В HTML появился новый элемент Search
Задаём блоку div и textarea одинаковые className и описываем свойства. Все свойства должны совпадать, кроме высоты.
В div добавляем свойство break-word, а textarea перемещаем поверх блока. Добавляем к окошку текста позиционирование absolute, а высоту выстраиваем в 100%. Таким образом, высота textarea будет равна высоте div, а границы textarea будут растягиваться по высоте контента.
Если вы хотите узнать ещё больше про фишки на HTML + CSS, научитесь делать простейшие анимации:
Как сделать чтобы textarea растягивался под текст
В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.
1. Изображение в качестве фона, которое пропадает при вводе текста.
Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.
textarea < background : url(images/benice.png) center center no-repeat; border : 1px solid #888; >Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:
$('textarea') .focus(function() < $(this).css("background", "none"); >) .blur(function() < if ($(this)[0].value == '') < $(this).css("background", "url(images/benice.png) center center no-repeat"); >>);2. Placeholder в HTML5
В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.
HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.
3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery
Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:
function elementSupportsAttribute(element, attribute) < var test = document.createElement(element); return (attribute in test); >;Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.
if (!elementSupportsAttribute('textarea', 'placeholder')) < // Если браузер не поддерживает атрибут, то выполняется код jQuery $("#example-three") .data("originalText", $("#example-three").text()) .css("color", "#999") .focus(function() < var $el = $(this); if (this.value == $el.data("originalText")) < this.value = ""; >>) .blur(function() < if (this.value == "") < this.value = $(this).data("originalText"); >>); > else < // Если же браузер поддерживает HTML5, то просто используем эту возможность $("#example-three") .attr("placeholder", $("#example-three").text()) .text(""); >4. Удаляем обводку textarea
Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.
textarea < outline: none; -moz-appearance: none; border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */ >5. Запрет изменения размера
Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:
textarea
6. Добавление возможности изменения размера
jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:
$("textarea").resizable();7. Изменение размера под содержимое
James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:
$('textarea').autoResize();8. Nowrap
Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.
9. Удаляем скролл-бары в IE
IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:
textarea
В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.
Примеры к статье вы можете посмотреть здесь.