Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]onclick i onclickout (?)
Forum PHP.pl > Forum > Przedszkole
Krychu1
Cześć. Próbuję napisać krótki skrypcik który po kliknięciu w tekstowy input usuwałby z niego domyślną wartość (pozostawiał czyste pole) a w sytuacji "odkliknięcia" (jeśli użytkownik nic nie wpisał) przywracał z powrotem domyślną wartość.
Wszystko jest dla mnie jasne do momentu "odkliknięcia". Jak sobie z tym poradzić?
lobopol
nie onclick a onfocus i onblur, gdy pierwszy event zapisujesz gdzieś zawartość np. w zmiennej, a przy blur sprawdzasz czy coś jest wpisane jak nie to przywracasz wartość ze zmiennej, możesz również użyć placeholdera z html5
Krychu1
Świetnie, dzięki.
A tak z ciekawości. Czy dużo trudniej zrobić jest tak, aby wartość znikała dopiero po wpisaniu pierwszego znaku?
lobopol
przy placeholderze nie, przy javascript musisz się podpiąć pod zdarzenie onkeydown w zasadzie nie jest to wiele trudniejsze
Krychu1
Okej, to również już działa. smile.gif
Jedyna rzecz jaka mnie jeszcze nurtuje to, aby po kliknięciu w input zawsze "kursor miejsca wpisywania tekstu" pojawiał się na początku, a nie tam gdzie klikniemy. Bez tego, jeszcze przed wciśnięciem znaku na klawiaturze daje to dziwne wrażenie - tak jakby najpierw trzeba było usunąć wartość domyślną.
SmokAnalog
Idźmy z duchem czasu i używajmy atrybutu placeholder.
  1. <input type="text" placeholder="Podpowiedź do pola">

Chyba, że pole naprawdę ma mieć wartość domyślną, a nie tylko podpowiedź, wtedy JavaScript. Dziwnie kombinujesz z tym ustawianiem kursora na początku. Może lepiej dać select() zamiast focus()?
Krychu1
Ah, przekonałeś mnie. smile.gif
Pozostaje kwestia zmiany koloru tekstu po kliknięciu na input. Tutaj pozostajemy przy JS tak?
SmokAnalog
Wystarczy CSS.

Kolor placeholdera zmieniasz tak: http://stackoverflow.com/questions/2610497...-color-with-css

A kolor pola, w którym coś już wpisano zmieniasz normalnie, np.:
  1. #pole {
  2. color: #000;
  3. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.