В новой спецификации HTML5 появился очень удобный атрибут placeholder (подробнее), позволяющий делать замещающий текст для элементов ввода формы.
Синтаксис:
<input type="text" placeholder="Введите Ваше имя"/>Этот текст показывается до тех пор, пока элемент не получит фокус, и появляется снова, если элемент пустой и потерял фокус. Такой подход отлично подходит для того, чтобы показать, для чего этот элемент ввода. К тому же экономится место на странице.
Но не всё так хорошо как хотелось бы. Ранние версии Internet Explorer < 10 версии, не поддерживают этот атрибут и отображают просто пустое поле ввода.
http://caniuse.com/#feat=input-placeholder
Однако существует большое количество разнообразных плагинов, которые исправляют это. Например этот: https://github.com/parndt/jquery-html5-placeholder-shim. Но до сих пор самым "костыльным костылём" остаётся обычная искусственная подстановка текста в поле ввода и стирание при событии клика по полю ввода. Этот способ работает во всех браузерах, поддеживающих javascript.
Поэтому я решил написать свой простейший велосипед, позволяющий добавлять placeholder для поля поиск: Репозиторий Github.
Плагин jquery.placeholder требует работает с любой версией jquery 1+.
Подключение плагина к странице
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.placeholder.js"></script>Инициализация
var options = {
color: 'green' // placeholder text color
};
$(element).placeholder(options);В объекте options хранятся общие настройки. Пока там всего 1 настройка color которая задаёт цвет placeholder'а. Если проекту необходимо будет расширение функционала, настроек будет становиться больше.
Так же, цвет placeholder'a можно задавать индивидуально каждому полю ввода с помощью data-аттрибута data-placeholder-color, например:
<input type="search" data-placeholder="Введите фразу для поиска" data-placeholder-color="green"/>Если плагин оказался полезным, или не работает пишите в комментариях или создавайте isue на github.