Znikające etykiety w formularzu

autor: Paweł 'lisek' Lis, ostatnia modyfikacja: 2008-03-16

szukaj: formularz input onfocus onblur

Czasem na stronie nie ma miejsca aby obok lub nad polami formularza była etykieta. Dotyczy to głównie shoutbox'ów i formularzy logowania, gdzie jak najwięcej miejsca chcesz przeznaczyć na treść (dot. shoutbox'ów), a jak najmniej na formularz dodawania nowej wiadomości lub logowania. W tej sytuacji warto sprawić aby etykieta pola była wewnątrz niego, i znikała po ustawieniu kursora, a pojawiała się ponownie, gdy pole będzie puste.

<input type="text" name="zaloguj" value="l_o_g_i_n"
onfocus="if (this.value=='l_o_g_i_n') { this.value=''; }"
onblur="if (this.value=='') { this.value='l_o_g_i_n'; }" />

Zdarzenie onfocus zachodzi gdy w polu ustawiony jest kursor, i sprawdza czy wewnątrz pola jest tekst „l_o_g_i_n”, jeśli tak-kasuje całą zawartość.

Zdarzenie onblur zachodzi gdy w polu był kursor, ale już go nie ma. Sprawdza czy tekst w polu to „”, lub właściwie czy tekstu nie ma. Jeśli tak, znowu wpisuje „l_o_g_i_n”. Proste?

Przy modyfikacji kodu należy pamiętać aby zamiast l_o_g_i_n podać identyczne teksty we wszystkich trzech miejscach kodu.

Oczywiście w polach typu „password” będą wyświetlane gwiazdki. Jednak użytkownicy są już na tyle do nich przyzwyczajeni, że z łatwością domyślą się, o co chodzi.

Paweł 'lisek' Lis

szukaj: formularz 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!