Трюки с textarea

Рассмотрим несколько приёмов работы с элементом textarea, которые весьма часто используется на страницах сайта.

Внедряем фоновый рисунок

Вы можете добавить в текстовое поле фоновый рисунок при помощи стиля background-image. Иногда, данный прием можно использовать как элемент дизайна или в качестве подсказки. Нужно помнить, что если вы решили добавить фоновый рисунок, то нарушите используемый по умолчанию стиль для textarea — вместо сплошной тонкой линии в 1 пиксель будет использоваться более толстая вдавленная линия. Чтобы восстановить «испорченный» стиль, достаточно добавить правило border: 1px solid #888;

textarea
{
    background: url(images/typename.png) center center no-repeat;
    border: 1px solid #888;
}

Убираем фоновый рисунок при помощи jQuery

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

Воспользуемся для этой цели сценарием, написанном на jQuery

$('textarea')
    .focus(function() { $(this).css("background", "none") })
    .blur(function() { if (this.value == '') { $(this).css("background", "url(typename.png) center center no-
 repeat") } });

Атрибут placeholder

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

Убираем UI-элемент для изменения размеров

Браузеры, основанные на движке WebKit, добавляют в текстовое поле дополнительный элемент интерфейса — небольшой треугольник в правом нижнем углу, при помощи которого можно изменять размеры текстового поля. Можно убрать данный элемент следующим образом:

textarea
{
    resize: none;
}

Убираем UI-элемент изменения размеров

Добавляем UI-элемент для изменения размеров

А можно наоборот добавить UI-элемент для изменения размеров к текстовому полю при помощи jQuery UI. Особенность данного решения — работа во всех браузерах, включая Internet Explorer.

Добавляем UI-элемент изменения размеров

Подгоняем размеры textarea под содержимое

Чтобы размеры текстового поля автоматически подгонялись под содержимое, можно воспользоваться плагином jQuery autoResize.

Попробуйте ввести какой-нибудь текст в нижнее текстовое поле и увидите, как оно начнет увеличиваться в своих размерах.

Однажды в студенную зимнюю пору… Продолжите текст

Перенос по словам

Если вы хотите отключить автоматический перенос по словам и печатать строчку до тех пор, пока не нажмёте клавишу Enter, то используйте атрибут wrap со значением off

<textarea wrap="off" cols="30" rows="5"></textarea>

Убираем полосы прокрутки у Internet Explorer

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

textarea
{
  overflow: auto;
}

Использованный материал: Textarea Tricks | CSS-Tricks

Реклама