Кросс-браузерный заполнитель полей форм на HTML5

Проверенный JavaScript-способ

Перед тем, как применить атрибут placeholder, давайте проверим, как JavaScript справится с этой задачей. Пример — ниже. Отображаемый текст помещается в значение атрибута value. Когда поле попадает в фокус, проверяется, совпадает ли его значение с текстом из value (в примере value = “Search”), и если совпадает, то вернется пустое значение, тем самым поле очищается. Если значение остается пустым, то вернется “Search”. Как вы, возможно, заметили, это не эффективный метод, так как приходится проверять каждое поле.

1 <input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}"onblur="if (this.value == '') {this.value = 'Search';}">


Чтобы использовать это на своем сайте, скачайте Modernizr и jQuery и вставьте следующий код в любое место вашего HTML кода (убедитесь в правильности путей к файлам modernizr.js и jquery.js).

Заполнитель с помощью jQuery

В HTML5 удобнее использовать атрибут placeholder, нежели по старинке value. Тем не менее, не все браузеры поддерживают данный атрибут. Чтобы это исправить, необходимо прибегнуть к помощи Modernizr и jQuery.

Modernizr используется здесь для того, чтобы проверить, поддерживается ли placeholder браузером. Если нет, то запустится код на jQuery. Данный код находит все элементы с атрибутом placeholder и закидывает их в переменную. Затем сверяет значение поля формы со значением данного атрибута. Если поле пустое, то в нем отобразится текст по умолчанию, а элементу добавится класс ‘placeholder’.

Чтобы использовать это на своем сайте, скачайте Modernizr и jQuery и вставьте следующий код в любое место вашего HTML кода (убедитесь в правильности путей к файлам modernizr.js и jquery.js).

01 <script src="jquery.js"></script>
02 <script src="modernizr.js"></script>
03
04 $(document).ready(function(){
05
06 if(!Modernizr.input.placeholder){
07
08 $('[placeholder]').focus(function() {
09 var input = $(this);
10 if (input.val() == input.attr('placeholder')) {
11 input.val('');
12 input.removeClass('placeholder');
13 }
14 }).blur(function() {
15 var input = $(this);
16 if (input.val() == '' || input.val() == input.attr('placeholder')) {
17 input.addClass('placeholder');
18 input.val(input.attr('placeholder'));
19 }
20 }).blur();
21 $('[placeholder]').parents('form').submit(function() {
22 $(this).find('[placeholder]').each(function() {
23 var input = $(this);
24 if (input.val() == input.attr('placeholder')) {
25 input.val('');
26 }
27 })
28 });
29
30 }
31
32 </script>

Убираем лишние стили

Webkit-браузеры добавляют дополнительные стили поисковым полям. Чтобы они не отображались, добавьте следующий CSS код:

1 input[type=search] {
2 -webkit-appearance: none;
3 }
4
5 input[type="search"]::-webkit-search-decoration,
6 input[type="search"]::-webkit-search-cancel-button {
7 display: none;
8 }

Комментарии закрыты