В элементе textarea атрибут rows определяет. Расширение возможностей с помощью jQuery. Базовые настройки 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).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 { resize: none; }

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 { overflow: auto; }

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть .

Поле TEXTAREA представляет собой элемент формы, для создания области, в которую можно вводить несколько строк текста. В отличие от тега INPUT в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами и можно поместить любой текст, который будет отображаться внутри поля.

Синтаксис


текст

Закрывающий тег
Обязателен.

Параметры
cols - ширина поля в символах.
disabled - блокирует доступ и изменение элемента.
name - имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
readonly - устанавливает, что поле не может изменяться пользователем.
rows - высота поля в строках текста.
wrap - параметры переноса строк.

Пример 1 . Использование тега TEXTAREA

Введите ваш отзыв:

Описание параметров тега TEXTAREA Параметр COLS

Описание
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задается количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

Аргументы
Любое целое положительное число.

Значение по умолчанию

Пример 2 . Ширина поля

Параметр DISABLED

Описание
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Синтаксис

Аргументы
Нет.

Значение по умолчанию

Пример 3 . Блокирование текстового поля

Активное поле
Неактивное поле

Параметр NAME

Описание
Определяет уникальное имя элемента TEXTAREA . Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис

Аргументы
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу TEXTAREA по имени соблюдайте ту же форму написания, что и в параметре name .

Значение по умолчанию
Нет.

Пример 4. Обращение к полю по его имени

function dataField(f) {
alert("Вы ввели: " + f.comment.value);

Введите комментарий

Параметр READONLY

Описание
Когда к тегу TEXTAREA добавляется параметр readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Синтаксис

Аргументы
Нет.

Значение по умолчанию
По умолчанию это значение выключено.

Пример 5. Текстовое поле только для чтения

Поле недоступно для изменения

Параметр ROWS

Описание
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.

Синтаксис

Аргументы
Любое положительное число.

Значение по умолчанию
Зависит от настроек браузера и операционной системы.

Пример 6 . Высота текстового поля

Параметр WRAP

Описание
Параметр wrap говорит браузеру, как осуществлять перенос текста в поле TEXTAREA и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

Аргументы
hard - При этом параметре длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие кнопки на клавиатуре устанавливает перенос текста.
off - Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

wrap=hard

wrap=off

Существуют и другие значения этого параметра, которые поддерживаются разными браузерами, но результат их использования похож на приведенные выше значения.

Значение по умолчанию
off

Пример 7. Переносы в текстовом поле

Описание

HTML тег определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

По умолчанию поле ввода элемента , при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера , то нужно прописать CSS свойство resize со значением none в атрибуте style , в этом случае получится запретить растягивать только данное поле ввода:

Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:

Textarea { resize: none; }

Размер текстового поля, заданный по умолчанию, может в разных браузерах быть разным. Для указания нужного размера можно воспользоваться атрибутами rows и cols или изменить ширину и высоту элемента с помощью CSS.

Между тегами и можно поместить любой текст, который будет изначально отображаться внутри текстового поля. Обратите внимание, что этот текст не исчезнет, когда поле ввода окажется в фокусе, поэтому если пользователь, при заполнении поля, не удалит данный текст, то он будет отправлен на сервер вместе с введенными данными.

Атрибуты autofocus: Указывает, что элемент автоматически получит фокус после загрузки страницы. Возможные значения логического атрибута autofocus:

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

Cols: Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию - 20. disabled: Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled: form: Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента .

Примечание: атрибут form не поддерживается браузером Internet Explorer.

Maxlength: Определяет максимально количество символов, которое можно будет ввести в текстовое поле.

Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.

Name: Определяет имя для элемента. placeholder: Определяет короткую подсказку, которая описывает ожидаемое значение для текстового поля. Подсказка будет отображаться в текстовом поле, когда оно пустое, и исчезнет при получение им фокуса.

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.

Readonly: Указывает, что текстовое поле будет доступно только для чтения, т.е. текст невозможно будет изменить, но будет возможность его скопировать. Возможные значения логического атрибута readonly: required: Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.

Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.

Rows: Указывает положительное целое число, определяющее высоту текстового поля (единицей измерения выступает высота строки). Если атрибут не указан, то используется значение по умолчанию - 2. wrap: Определяет параметры переноса строк в тексте, при отправке данных на сервер:

• hard - браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols .
• soft - текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.

Тег так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию Пример Здесь могла быть ваша реклама:)

Тег (от англ. text area - область текста) представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста.

autocomplete

Этот атрибут помогает заполнить текстовое поле текстом, который был введён в нём ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .

Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.

Синтаксис

Значения

• on - Включает автозаполнение текста.
• off - Отключает автозаполнение.

Значение по умолчанию

Зависит от настроек браузера.

autofocus

Автоматически устанавливает фокус в текстовое поле. В таком поле можно сразу набирать текст без переключения курсора в текстовое поле.

Синтаксис

Значения

Значение по умолчанию

По умолчанию атрибут autofocus не установлен.

cols

Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.

Синтаксис

Значения

Значение по умолчанию

dirname

При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (арабского, к примеру) значение будет rtl .

Синтаксис

Значения

Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют.dir .

Значение по умолчанию

disabled

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Заблокированный в поле текст не передаётся на сервер.

Синтаксис

Значения

Значение по умолчанию

form

Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами .

Синтаксис

Значения

Идентификатор формы (значение атрибута id элемента ).

Значение по умолчанию

maxlength

Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.

Синтаксис

Значения

Любое целое положительное число.

Значение по умолчанию

minlength

Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.

Синтаксис

Значения

Любое целое положительное число.

Значение по умолчанию

name

Определяет уникальное имя элемента . Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.

Синтаксис

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .

Значение по умолчанию

placeholder

Выводит подсказывающий текст внутри текстового поля, который исчезает при получении фокуса или наборе текста. В качестве подсказки обычно применяется короткий текст, состоящий из одного слова или фразы.

Синтаксис

Значения

Текстовая строка.

Значение по умолчанию

readonly

Когда к элементу добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. Также содержимое поле можно выделить и скопировать в буфер обмена.

Синтаксис

Значения

Значение по умолчанию

По умолчанию это значение выключено.

required

Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

Значения

Значение по умолчанию

По умолчанию атрибут required выключен.

rows

Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.

Синтаксис

Значения

Любое целое положительное число.

Значение по умолчанию

В HTML4 зависит от настроек браузера и операционной системы.

wrap

Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введённых символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.

Синтаксис

Значения

• soft - Слова в текстовом поле переносятся механически, если они не поместились в размер области, но при отправке на сервер переносы не сохраняются.
• hard - Длинный текст, который самостоятельно не помещается в поле по ширине, автоматически переносится на новую строку и вместе с переносами отправляется на сервер. Для работы требуется наличие атрибута cols .

Значение по умолчанию

Спецификации Примеры TEXTAREA

Введите ваш отзыв:

Краткий обзор полезных свойств одной из элемент формы — textarea, которые позволят решить ряд возможных проблем при верстке сайта.

Поле textarea представляет собой один из элементов формы предназначенный для ввода многострочных данных. Рассказывать подробней не вижу смысла – читайте документацию, а вот остановиться на некоторых интересных свойствах textarea будет не лишним.

Текст по умолчанию для textarea в HTML5

Достаточно распространенное решение – вместо того чтобы описывать предназначение элемента формы отдельной строкой используется так называемый «текст по умолчанию». Обычно для этого используется простенький JavaScript для соответствующих событий.

.

Конечно, можно придумать и более удобное решение, но думаю, что суть вы уловили. В HTML5 для тега textarea появился новый атрибут placeholder (с англ. заполнитель ) позволяющий выполнить то же самое без заморочек с JavaScript.

Это свойство textarea отображает в поле указанное значение атрибута в виде текста светло-серого цвета, который исчезает при фокусировке на элементе формы. Понятно, что эта новинка работает только в тех браузерах, которые поддерживают стандарт HTML5.

Голубая подсветка у textarea

При фокусировке на элементе формы, большинство современных браузеров, подсвечивают его границы голубой рамкой. Несмотря на то, что данное свойство textarea служит улучшению юзабилити сайта, в некоторых случаях оно является неприемлемым. Для того чтобы убрать голубую подсветку в textarea можно использовать CSS-свойство outline .

Textarea { outline: none; -moz-appearance: button; /* for Firefox */ }

Свойство outline задает параметры внешней границы. К сожалению, это работает не для всех браузеров. Для Firefox я использую свойство -moz-appearance хотя оно предназначен для отображения элемента как стандартных пользовательских элементов на основе темы операционной системы.

Отключить маркера изменения размера textarea

Большинство современных браузеров отображают элемент textarea c маркером изменения размера текстового поля в нижнем левом его углу. Для отключения этого свойства textarea можно использовать CSS-свойство resize .

Textarea { resize: none; }

CSS-свойства resize может иметь и другие значения: both (по горизонтали и вертикали), horizontal (только по горизонтали), vertical (только по вертикали) и inherit (наследует значение родителя).

Текст без переносов строк в textarea

Когда количество символов в textarea превышает ширину его области, происходит автоматический перенос строки. По идее, чтобы избежать этого можно указать для textarea следующие CSS-свойства:

Textarea { white-space: nowrap; overflow: auto; }

Однако такой вариант работает далеко не для всех браузеров и зачастую не так как нужно. Обычно используется свойство wrap , появившееся уже давно, но документированное лишь в HTML5.

Свойство wrap может иметь и другие значения: soft (слова переносятся автоматически) и hard (слова переносятся механически).

Убрать полосу прокрутки textarea

В браузере Internet Explorer вертикальная прокрутка textarea установлена по умолчании. Для того чтобы ее убрать, можно использовать CSS-свойство overflow , присвоив ему значение hidden, но я рекомендую использовать auto, что позволит оставить прокрутку если она действительно понадобится.

Textarea { overflow: auto; }