Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Заплатки JavaScript

.

Заплатки JavaScript

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

Вот как это делается. Сначала JavaScript должен определить, наличествует ли поддержка. Если нет, используйте функцию, создающую «поддельный» плейсхолдер. Эта функция нужна для того, чтобы определить, какое из полей формы содержит атрибут placeholder, а затем поместить значение этого атрибута в поле ввода.

Затем понадобится установить два обработчика событий: один — чтобы очистить поле ввода при наведении фокуса, другой — чтобы восстановить значение плейсхолдера, если фокус ввода уведен, а значение поля не изменилось или введена пустая строка. Если вы используете эту хитрость, убедитесь, что значение атрибута placeholder не равно тому, которое ввел пользователь, и не забудьте очистить «фальшивый» плейсхолдер после отправки формы (в противном случае форма пришлет вам массу сообщений типа «(XXX) ХХХ-ХХХХ»!).

Давайте взглянем на пример сниппета JavaScript (мы использовали библиотеку j Query для краткости), который будет использоваться для улучшения нашей формы.

Вот листинг:

register.html (фрагмент)

Заплатки JavaScript

Заплатки JavaScript

Сразу бросается в глаза, что мы используем библиотеку Modernizr для определения того, поддерживает ли браузер атрибут placeholder. Подробнее о Modernizr можно узнать из приложения А, пока же нам достаточно того, что он обеспечивает нам целый ряд переменных, имеющих значение true или false в зависимости от того, какие функции и возможности поддерживает браузер. В данном случае свойство, которое мы используем, довольно очевидно. Modernizr. input .placeholder будет иметь значение true в браузерах, имеющих поддержку HTML5, и false, если такая поддержка не обеспечена. Если сделан вывод о том, что поддержка отсутствует, мы перехватываем контроль над всеми элементами input и textarea с атрибутом placeholder. Для каждого из них проверяем, что значение не пустое, затем заменяем его значением, содержащимся в атрибуте placeholder. В ходе этой процедуры мы добавляем класс placeholder class к элементам, так что у вас появляется возможность изменить цвет надписи при помощи CSS или сделать ее похожим на «родной» плейсхолдер. Когда пользователь переводит фокус ввода на элемент с «фальшивым» плейсхолдером, скрипт очищает значение и класс. После увода фокуса скрипт снова проверяет значение поля. Если оно пустое, добавляем обратно текст плейсхолдера и класс.

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

.

Читайте так же:
Not found