sobota, 12 stycznia 2013

Poprawa działania atrybutu placeholder

Uwaga: Niniejszy wpis został uaktualniony.

Razem z nadejściem HTML5 wprowadzono kilka nowości, między innymi atrybut placeholder.

Atrybut ten został wprowadzony jako dodatkowa informacja do pól formularzy. Obecnie wszystkie kluczowe przeglądarki obsługują ten atrybut, co ciekawe w różnych formach (np. w Chrome), ale o tym później.

Jak zmusić stare przeglądarki do używania atrybutu placeholder?
Najpierw musimy zdeklarować ten atrybut w polu formularza:
<input type="text" placeholder="Wprowadź imię i nazwisko" />
Powyższe rozwiązanie zadziała tylko w najnowszych przeglądarkach.
Żeby zmusić stare przeglądarki do obsługi omawianego atrybutu, należy wykorzystać poniższy kod:
$('[placeholder]').each(function() {
 var placeholder = $(this).attr('placeholder');
  
 $(this).focus(function() {
  if($(this).val() == placeholder) {
   $(this).val('');
   $(this).attr('placeholder', '');
  }
 }).blur(function() {   
  if($(this).val() == '' || $(this).val() == placeholder) {
   $(this).attr('placeholder', placeholder);
   $(this).val(placeholder);
  }
 }).blur();
});
Teraz pokrótce wyjaśnię, co poszczególne funkcje wykonują:

Na początku wyszukujemy za pomocą selektora $() wszystkie (.each()) atrybuty w całym dokumencie, następnie zapisujemy do zmiennej var placeholder wartość atrybutu, tj. "Wprowadź imię i nazwisko".
Funkcja .focus() zadziała przy wprowadzeniu kursora do pola formularza i odrazu sprawdzi czy pole zawiera jakąś wartość równą wartości zmiennej placeholder, jeśli warunek zostanie spełniony to wartość pola i omawiany atrybut zostaną wyczyszczone.
Funkcja .blur() zadziała w momencie opuszczenia pola formularza i sprawdzi warunek czy wartość pola jest pusta lub (||) wartość jest równa zmiennej, jeśli któryś z warunków otrzyma wartość true to zostanie przywrócona wartość tekstowa pola i atrybutu.

I to wszystko...

Poprawnie działający skrypt można obejrzeć na jsfiddle.net

Na początku wspomniałem o innym sposobie interpretowania atrybutu w najnowszych przeglądarkach. Przykładem jest Chrome, gdzie atrybut placeholder nie znika w momencie aktywowania pola, ale dopiero po wprowadzeniu pierwszego znaku. Mnie osobiście się to nie podoba, z stąd też powyższy kod rozwiązuje tą niedogodność.

Kod testowano na:

  • Chrome 23
  • Internet Explorer 10
  • Firefox 17
  • Safari 5.1.7
  • Opera 12.12

Brak komentarzy:

Prześlij komentarz