Текст-заполнитель обычно показывается шрифтом более светлого цвета, чем шрифт самого значения поля формы. Это реализуется с помощью CSS, JavaScript или обоими этими инструментами вместе.
В документе HTML5 вы можете просто использовать атрибут placeholder (рис. 4.01):
>
>>placeholder="Стряхивать филинов с деревьев">
>Рис. 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.
>}
Autofocus
«Привет! Я автофокус. Может быть, вы помните меня по кнопочкам на сайтах: “Google: мне повезет” и “Twitter: что происходит?”»
Это простое типовое решение из одного шага, которое достаточно просто программируется на JavaScript:
1. Когда документ загрузился, автоматически поставить фокус на одно конкретное поле в форме.
HTML5 позволяет вам сделать это с помощью булева атрибута >autofocus:
>
>autofocus>
Единственная проблема с этим решением – оно может адски раздражать. Когда я хожу по страничкам в вебе, я часто нажимаю пробел, чтобы прокрутить страницу на экран вниз. На таких сайтах, как Twitter, которые используют автофокус, я понимаю, что занимаюсь тем, что не пролистываю экран, а впечатываю пробелы в поле формы.
Мне понятно, почему атрибут >autofocus оказался добавлен HTML5 – снова принцип асфальтирования тропинок, – но меня беспокоит юзабилити этого решения: реализуется ли оно скриптом или средствами браузера. Эта функция может быть полезной, но может точно также и приводить в ярость. Пожалуйста, как следует подумайте перед тем, как применять его.
Одно из преимуществ того, чтобы переместить это решение из скрипта в разметку, в том, что теоретически браузеры могут включить опцию настройки, с помощью которой пользователи смогут отключить автоматическую фокусировку. На практике ни в одном браузере такой настройки пока нет, но введено это решение в HTML5 относительно недавно. На данный момент единственный способ отключить автофокус методами JavaScript – отключить сам JavaScript совсем. Это работает, но, надо сказать, это довольно радикальное решение – такое же, как, например, выдавить себе глаза, если вас раздражает яркий свет.