—»     —»   placeTo | Кроссбаузерный placeholder для вашего сайта
  Раздел: Java-Скрипты   Нет комментариев  

placeTo | Кроссбаузерный placeholder для вашего сайта



placeTo | Кроссбаузерный placeholder для вашего сайта

Предыстория

Недавно верстал сайт, сверстал хорошо, в принципе, но клиент оказался придирчив. Ему нужно было, чтобы для полей ввода показывались подсказки определенного цвета. В современных браузерах подсказки создаются благодаря атрибуту placeholder. Но как было мне поступить со старыми браузерами. В техническом задании, который приложил мне заказчик, был пункт - поддержка IE7+. Вот тут я искал готовые решения, но из всех ничего подходящего для себя не нашел. В итоге я написал скрипт за 20 минут, который реализовывал мою задачу, но, чтобы не создавать такой велосипед, созданный мною, я подумал, а не оформить ли в отдельный проект все это, вдруг кому будет интересно.

Использование

Чтобы долго не расписывать то, что и так есть на сайте документации, я просто расскажу алгоритм:

> Просто добавляем скрипт в область head (body) нашего html-документа, скрипт placeto.js. Да, с учетом, подключенной библиотеки jquery.js

> Для наших инпутов (type='text'), полей ввода прописываем в атрибуте placeholder какое-нибудь значение - это и есть подсказка

> В этом же и инпуте, поле ввода укажите атрибут onfocusout='fout()' - это необходимо для поддержки старых браузеров IE6+, также данный атрибут срабатывает и для остальных браузеров, является ключевым

> Если хотите указать цвет для подсказки пропишите значение в атрибут data-pcolor=" ЗНАЧЕНИЕ ЦВЕТА ", для цвета текста полей ввода применяйте атрибут data-vcolor=" ЗНАЧЕНИЕ ЦВЕТА "

Если из ниже сказанного что-то непонятно, наглядно все указано в документации на сайте placeTo

Документация
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript
Опубликовал omaxphp   Прочитано (раз): 2699   |   Нет комментариев
Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031