Html в элементе textarea атрибут cols определяет. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery. Расширение возможностей с помощью jQuery

В основе этой статьи лежит следующая - . Я вношу некоторые коррективы и поправки в ту статью, меняю порядок для наглядности и понятности, а также предлагаю живые примеры. Итак.

Все предлагаемые хитрости делятся на три группы: "Базовые настройки", "Расширение возможностей с помощью jQuery" и "Решение проблемы исчезновения текста при клике". Начнём по порядку.

Базовые настройки textarea

Взгляните на скриншот. На нём представлено активное поле textarea (браузер Google Crome). Устраняем его некоторые, в той или иной степени, недостатки.

Расширение возможностей с помощью jQuery

$("textarea").autoResize();

Добавляем уголок для ресайза textarea . Для этого нужен не только сам jQuery, но и jQuery UI. Лично у меня адекватно эта примочка не работала. Может стоило попробовать другую версию jQuery UI.

$("textarea").resizable();

Решение проблемы исчезновения текста в textarea при клике

Решение HTML5 - placeholder . Этот атрибут в HTML5 помешает в текстовое поле textarea (для текстовых input"ов тоже актуально) светло-серый текст, который исчезает при клике на область. Если поле осталось пустым и вы делаете его неактивным, то текст появится вновь. Это свойство работает в Safari 5, Mobile Safari, Chrome 6 и Firefox 4 alpha.

Изменяем бэкграунд textarea по клику . Для тех, у кого не работает placeholder, можно поиграться с бэкграундом. Задайте бэкграунд для текстового поля и затем настройте предлагаемый код jQuery.

Focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this).value == "") { $(this).css("background", "url(image.png) no-repeat") } });

Изменяем содержание textarea по клику - аналог placeholder на jQuery . Делается довольно просто.

$("#example-three")
.data("ShuBlog!", $("#example-three").text())
.css("color", "#ff9900")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("ShuBlog!")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("ShuBlog!");
}
});

Однако в той статье, на которую была ссылка в самом начале, скрипт был сложнее и занимался он вот чем: он проверял существует ли атрибут placeholder и в случае положительного ответа, он создавал placeholder для тега, а в случае отрицательного ответа - показанный чуть выше скрипт. Смысл этих действий я не очень понял по нескольким причинам.
Во-первых, если мы используем jQuery, то какая разница что за метод мы выберем? Не думаю, что в быстродействии это скажется. А во-вторых - placeholder имеет светлосерый текст, а если нам нужен другой цвет? В общем не ясно. Тем не менее полный скрипт приведу.

Первые 8 строк - функция проверки существования атрибута (любого). В 10 строке мы проверяем есть ли атрибут placeholder, и в случае если нет, выполняются знакомые 11-24 строки, а если нет, то 26-28 строки. В оригинале у меня 28 строка не работала и я заменил её на упрощённую - .attr("placeholder", "originalText").

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

Краткий обзор полезных свойств одной из элемент формы — 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; }

Поле 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. Переносы в текстовом поле