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

Самым приятным новшеством в HTML5 является возможность добавления текста по умолчанию в поля форм. Атрибут placeholder позволяет отображать в полях формы определенный текст, пока они пусты или находятся не в фокусе (когда поле в фокусе, оно очищается). Это стильная фишка, но все же она поддерживается не всеми браузерами. В этом уроке я покажу, как с помощью Modernizr, определить, поддерживается ли она данным браузером, и если нет, то забить поля формы текстом по умолчанию динамически через jQuery.

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

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

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

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

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

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

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

<script src="/jquery.js"></script>
<script src="/modernizr.js"></script>

$(document).ready(function(){

if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

</script>

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

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

input[type=search] {
    -webkit-appearance: none;
}

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/9GbTkvYEx0o/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Кросс-браузерный заполнитель полей форм на HTML5 | | 2012-06-19 12:08:23 | | Статьи Web-мастеру | | Самым приятным новшеством в HTML5 является возможность добавления текста по умолчанию в поля форм. Атрибут placeholder позволяет отображать в полях формы определенный текст, пока они пусты или | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: