<<
>>

Placeholder

Когда в веб-браузерах появился JavaScript, его немедленно стали использовать для двух задач: изменения картинки при наведении мышью и улучшения форм. Когда же в CSS появился псевдокласс :hover, веб-разработчикам перестало быть нужным использовать JavaScript для того, чтобы добиться просто изменения картинки при наведении.

И эта картина зачастую повторяется. Если какое-то типовое действие достаточно популярно, практически наверняка развитие будет идти так, что вместо того чтобы писать собственный скрипт, достаточно будет более декларативного решения. Вот почему в CSS3 появляется еще больше возможностей для анимации из числа тех, что раньше требовали JavaScript.

Когда дело касается улучшения форм, у CSS есть ряд ограничений. Здесь в дело вступает HTML5. Следуя той же самой проторенной дорожкой от программного решения к декларативному, спецификация HTML5 вводит много новых улучшений форм.

Эти функции изначально были частью спецификации WHATWG, которая называлась Веб-формы 2.0 и основывалась на уже проделанной работе в W3C. Эта спецификация теперь включена в HTML5.

Вот типичная задача, которая часто используется для поисковых форм и обычно решается написанием скрипта для DOM:

1. Если у поля формы нет значения, вставить туда текст-заполнитель.

2. Когда пользователь перемещает фокус на это поле, убрать текст-заполнитель.

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

Текст-заполнитель обычно показывается шрифтом более светлого цвета, чем шрифт самого значения поля формы. Это реализуется с помощью CSS, JavaScript или обоими этими инструментами вместе.

В документе HTML5 вы можете просто использовать атрибут placeholder (рис. 4.01):

Ваши хобби

Рис. 4.01. «Стряхивать филинов с деревьев» появляется в поле input посредством атрибута placeholder

Атрибут placeholder прекрасно работает в браузерах, которые его поддерживают, но, увы, таких браузеров прямо сейчас не так-то много. Вы сами решаете, что вы хотите видеть в других браузерах, которые пока этот атрибут не поддерживают.

Вы можете вообще ничего не делать. В конце концов это функциональность из разряда «хорошо бы иметь», а не «обязательно иметь».

Либо же вы можете сделать запасное решение на JavaScript. В этом случае вам нужно убедиться, что скрипт на JavaScript будет исполняться только в браузерах, которые не понимают атрибут placeholder.

Вот маленькая JavaScript-функция общего характера, которая тестирует, поддерживается тот или иной атрибут или нет:

function elementSupportsAttribute(element,attribute) {

var test = document.createElement(element);

if (attribute in test) {

return true;

} else {

return false;

}

}

Работает это так: в памяти создается «фантомный» элемент (в вашем документе его нет), а затем проверяется, есть ли в прототипе этого элемента свойство с тем же названием, что и атрибут, который вы передаете в эту функцию. Функция вернет true или false.

С помощью этой функции вы можете удостовериться, что JavaScript-решение будет исполняться только в тех браузерах, которые не поддерживают placeholder:

if (!elementSupportsAttribute('input','placeholder')) {

// Код запасного решения на JavaScript.

}

<< | >>
Источник: Кит Джереми. HTML5 для веб-дизайнеров. 2013

Еще по теме Placeholder:

  1. Вспомогательная аксиома № 15. Никогда не пытайтесь спасти плохие инвестиции за счет усреднения
  2. Спекулятивная стратегия
  3. Основная аксиома № 12
  4. О планировании
  5. Вспомогательная аксиома № 16. Избегайте долгосрочных инвестиций
  6. Спекулятивная стратегия
  7. Основная аксиома № 11
  8. Об упорстве
  9. Спекулятивная стратегия
  10. Основная аксиома № 10
  11. О консенсусе
  12. Вспомогательная аксиома № 14. Никогда не следуйте чужим прихотям. Часто наилучшее время для покупки наступает тогда, когда никто другой этого не хочет
  13. Спекулятивная стратегия