Предыстория
Недавно верстал сайт, сверстал хорошо, в принципе, но клиент оказался придирчив. Ему нужно было, чтобы для полей ввода показывались подсказки определенного цвета. В современных браузерах подсказки создаются благодаря атрибуту placeholder. Но как было мне поступить со старыми браузерами. В техническом задании, который приложил мне заказчик, был пункт — поддержка IE7+. Вот тут я искал готовые решения, но из всех ничего подходящего для себя не нашел. В итоге я написал скрипт за 20 минут, который реализовывал мою задачу, но, чтобы не создавать такой велосипед, созданный мною, я подумал, а не оформить ли в отдельный проект все это, вдруг кому будет интересно.
Использование
Чтобы долго не расписывать то, что и так есть на сайте документации, я просто расскажу алгоритм:
> Просто добавляем скрипт в область head (body) нашего html-документа, скрипт placeto.js. Да, с учетом, подключенной библиотеки jquery.js
> Для наших инпутов (type='text'), полей ввода прописываем в атрибуте placeholder какое-нибудь значение — это и есть подсказка
> В этом же и инпуте, поле ввода укажите атрибут onfocusout='fout()' — это необходимо для поддержки старых браузеров IE6+, также данный атрибут срабатывает и для остальных браузеров, является ключевым
> Если хотите указать цвет для подсказки пропишите значение в атрибут data-pcolor=" ЗНАЧЕНИЕ ЦВЕТА ", для цвета текста полей ввода применяйте атрибут data-vcolor=" ЗНАЧЕНИЕ ЦВЕТА "
Если из ниже сказанного что-то непонятно, наглядно все указано в документации на сайте placeTo.