Меню показать Меню скрыть
Современные
проекты
от ПаЛыЧа
Сайк ПавелСайк Павел
6 г. назад

HTML cвойства тега textarea

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

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

Замещающий текст в 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?

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

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

textarea {
    outline: none;
}

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

Как удалить маркер изменения размера у textarea?

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

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

textarea {
   resize: none;
}

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

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

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

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

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

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

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

textarea {
   overflow: auto;
}

Источник: Textarea tricks

Комментарии

#Наталия19.11.2010 13:35
для того что бы не появлялась горизонтальная полоса прокрутки не работает ни то ни тою В чем может быть проблема? Ответить
#PaLyCH19.11.2010 13:51
А overflow:visible не пробовали? Ответить
#danik.html20.11.2010 05:56
Для реализации placehoder'а в несовместимых браузерах существует скрипт placehoder.js .Во-первых, с ним проще чем прописывать инлайн-скрипты onblur onfocus, во вторых он не имеет недостатков присущих такому способу.

зы: указатель над полем ввода капчи ввел в ступор на несколько секунд )) Ответить
#PaLyCH20.11.2010 09:53
Вот ты любитель понапихать скриптов, там да тут. ДО добра это не приведет Ответить
#danik.html20.11.2010 14:06
Да, критика у тебя что надо. Мощная аргументация....
Я не любитель понапихать скриптов. Я любитель простоты и единства разработки. Обычно в конце сливаю все скрипты в один через google closure compiler. Сжатый файл placeholder.js занимает 795 байт, это много? Ответить
#Гость14.02.2011 17:07
Спасибо аффтаР сата. респектище Ответить
#Гость02.03.2011 17:15
Спасибо!
Мелочи, а помогло сделать интерфейс форм более кроссбраузерным) Ответить

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

Наверх