Dynamiczna etykieta w polach tekstowych formularza

autor: Rafał Kukawski , ostatnia modyfikacja: 2008-05-10

szukaj: javascript formularze input onfocus onblur

Niektórzy webmasterzy preferują wstawienie opisu danego pola tekstowego jako jego treść, a nie w postaci etykiety umieszczonej obok pola. Głównym powodem jest na pewno oszczędność miejsca. Dla wygody użytkowników warto dodać funkcjonalność automatycznego usuwania opisu z pola, żeby użytkownik mógł od razu wpisać swój tekst. Poniższy kod realizuje całe zadanie.

<input type="text" name="email" value="Wpisz swój adres e-mail" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">

Skrypt wykorzystuje dwa zdarzenia, które użytkownik może wywołać wykonując pewne czynności na polach tekstowych. Chodzi o zdarzenia focus oraz blur. Pierwsze z nich zachodzi, gdy pole formularza przejmie na siebie obsługę klawiatury (tj. będzie można w pole wpisywać tekst). Drugie zdarzenie zachodzi, gdy polu tekstowemu zostanie odebrana obsługa klawiatury. Wystarczy obsłużyć te dwa zdarzenia, np. za pomocą atrybutów onfocus i onblur.

Kod w atrybucie onfocus sprawdza, czy wpisana w pole wartość jest identyczna z domyślną wartością, wpisaną przez webmastera strony. Jeśli taka sytuacja ma miejsce, cały tekst z pola zostaje usunięty.

Z kolei kod w atrybucie onblur sprawdza, czy użytkownik przypadkiem się nie rozmyślił i nie pozostawił pustej wartości. Jeśli tak właśnie jest, zostaje przywrócona wartość domyślna.

Dla ścisłości, domyślną wartością w wyżej podanym kodzie jest "Wpisz swój adres e-mail".

Niniejsza porada jest nawiązaniem do publikacji Znikające etykiety w formularzu w celu zaprezentowania kosmetycznych poprawek - red.

Rafał Kukawski , http://www.rafael.jogger.pl

szukaj: javascript formularze input input onfocus onfocus onblur onblur

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!