Сайт о телевидении

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

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, которые позволят решить ряд возможных проблем при верстке сайта.

Поле 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; }

Тег </b> <i>(от англ. <b>text </b> <b>area </b> - область текста) </i> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста.</p> <h3>autocomplete</h3> <p>Этот атрибут помогает заполнить текстовое поле текстом, который был введён в нём ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .</p> <p>Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.</p> <p><b>Синтаксис </b></p><p> <textarea autocomplete="on | off">

Значения