Свойства textarea

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

Замещающий текст в HTML5

Существует новый атрибут в качестве части формы HTML5 называется placeholder. Это свойство textarea показывает текст приглушонно серого цвета (также работает для полей Input), который исчезает при наведении фокуса на поле или вводе хотя бы одного символа в поле.

<textarea placeholder="Замещающий текст" cols="30" rows="5"></textarea>

Работает только в webkit браузерах (Safari и Chrome). Но есть решение для всех браузерах, но конечно не будет таким красивым. Для работы не обходим JS.

<textarea cols="20" onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';">поиск...</textarea>

Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.

Удаление голубого свечения у textarea

Все WebKit браузеры, Firefox 3.6, и все 10 оперы навешивают голубую каемку вокруг textarea, когда они находятся в фокусе. Вы можете удалить его из браузера следующим образом:

textarea {
outline: none;
}

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

Удалить маркер изменения размера

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

textarea {
resize: none;
}

Nowrap - убрать переносы

Чтобы текст автоматически не переносился, в CSS, можно использовать #whatever { white-space: nowrap}. Но это описание не работает с textarea по каким-то причинам  Если вы хотите, чтобы иметь возможность не переносить слова на новую строку в textarea, пока вы не нажмете Enter (будет возникать горизонтальная полоса прокрутки, а не срабатывает), вам придется использовать атрибут wrap="off".

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

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

IE ставит вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда вы текста станет больше, чем высота поля. Слава богу auto overflow удалит прокрутки, но включит прокрутку автоматически в случае необходимости.

textarea {
overflow: auto;
}

Источник: Textarea tricks

Комментарии 

# Наталия 19.11.2010 13:35

для того что бы не появлялась горизонтальная полоса прокрутки не работает ни то ни тою В чем может быть проблема? Ответить

# PaLyCH 19.11.2010 13:51

А overflow:visible не пробовали? Ответить

# danik.html 20.11.2010 05:56

Для реализации placehoder'а в несовместимых браузерах существует скрипт placehoder.js .Во-первых, с ним проще чем прописывать инлайн-скрипты onblur onfocus, во вторых он не имеет недостатков присущих такому способу.

зы: указатель над полем ввода капчи ввел в ступор на несколько секунд )) Ответить

# PaLyCH 20.11.2010 09:53

Вот ты любитель понапихать скриптов, там да тут. ДО добра это не приведет Ответить

# danik.html 20.11.2010 14:06

Да, критика у тебя что надо. Мощная аргументация....
Я не любитель понапихать скриптов. Я любитель простоты и единства разработки. Обычно в конце сливаю все скрипты в один через google closure compiler. Сжатый файл placeholder.js занимает 795 байт, это много? Ответить

# Гость 14.02.2011 17:07

Спасибо аффтаР сата. респектище Ответить

# Гость 02.03.2011 17:15

Спасибо!
Мелочи, а помогло сделать интерфейс форм более кроссбраузерным) Ответить

Обновить список комментариев

Добавить комментарий

Имя *

E-Mail *

Отправить

Отменить