Znikający tekst w polu wyszukiwania [krok po kroku]
Widziałeś kiedyś pole wyszukiwania, w którym na początku widać tekst typu „Znajdź wpisy…” a po kliknięciu tekst znika? Zrobienie tego jest dość proste.
Twoje pole wyszukiwania wpisów może wyglądać mniej więcej tak:
Zwykłe pole do wyszukiwania, ale możemy zrobić z niego coś więcej:
- Na początku wewnątrz pola wyświetla się tekst „Znajdź wpisy…”.
- Po kliknięciu wewnątrz pola tekst znika i możemy wpisać to, czego szukamy.
- Jeśli pole jest puste i klikamy gdziekolwiek indziej na stronie znów pojawia się tekst „Znajdź wpisy…”.
Po co się bawić?
- Zastosowanie takiego „bajeru” zwiększa interaktywność strony – mała rzecz a cieszy.
- Pole wygląda schludniej – po co te wszystkie ramki, nagłówki itp.
- Nie ma możliwości by niechcący szukać „Znajdź wpisy…WordPress” (zdarza mi się co najmniej dwa razy w tygodniu…grrrrr).
- Zmiany w kodzie strony są bardzo proste.
- Działa na każdej stronie, blogu itp.
Zaczynamy
Kod pola wyszukiwania wygląda mniej więcej tak (różnice nie są ważne):
[html]
[/html]
ale nas interesuje tylko pole tekstowe (mniej ważną część kodu zastąpiłem znakiem „/**/”):
[html]/**/
/**/[/html]
1.) chcemy, żeby na początku pole zawierało tekst „Znajdź wpisy…” więc zmieniamy value=” na :
[html]
[/html]
2.) tekst ma znikać, gdy klikniemy gdziekolwiek w polu więc dopisujemy:
[html]
[/html]
3.) ale tekst ma znikać tylko, gdy użytkownik wcześniej niczego nie wpisał wiec zmieniamy wartość onfocus=”this.value == ”;” na:
[html]
[/html]
(Uwaga: we fragmencie {this.value = ”;} są dwa apostrofy, czyli ‘ + ‘)
4.) Na koniec jeszcze chcemy, by tekst „Znajdź wpisy…” pojawiał się gdy użytkownik kliknie gdzie indziej na stronie (ale tylko jeśli pole będzie puste) więc dodajemy:
[html]
[/html]
(Uwaga: we fragmencie {this.value == ”;} ponownie są dwa apostrofy, czyli ‘ + ‘)
Pod koniec kompletny kod pola tekstowego wygląda mniej więcej tak:
[html]
onfocus="if (this.value == 'Znajdź wpisy...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Znajdź wpisy...';}" />[/html]
5.) Gotowe! Jak działa? Możesz sprawdzić na moim polu wyszukiwania. Polecam ;)
- Dodaj
kanał rss
do swojego czytnika - Skorzystaj z
adresu trackback - Prenumeruj
kanał komentarzy
Kommentarze: 21 »
Hmm…ja mam to trochę krócej:
<input type="text" name="s" id="s" size="18" value="Przeszukaj stronę" onfocus="this.value=''"/>Zgadza się, u Ciebie jest krócej. Tekst „szukaj na stronie” nie pojawia się ponownie, a jesli coś wpiszesz, zmienisz focus i klikniesz ponownie na okno to tekst znika. Wiekszość ludzi nie skorzysta z udogodnień całego opisanego skryptu, wiec w wersji podstawowej rozwiązanie onfocus powinno wystarczyć. :)
Ano tak, dopiero teraz to zauważyłem :) Już zmieniam.
Kurs HTMLa u bloggera :P hehe
Taka mała wstawka HTML+JS :). Nie wiem jak u Ciebie, ale mi wstawienie takiego małego gadżetu na bloga znacznie podniosło humor wczoraj :)
wrrr wcięło mi komenta wcześniejszego :(
a więc :P
kiedyś wykorzystałem z onclickiem na jakiś projekt uczelniany, aż mi się łezka za uczelnią puściła :)
Nie ma to jak chwila wspomnień :). Dziękuję za informacje o komentarzu, podkręcę jeszcze nieco ustawienia i powinno być dobrze (tzn. całkowity brak zjadania komentarzy, bo na razie tylko znacznie się zmniejszyło).
jeee, w końcu działa u Ciebie Łukasz moja ikonka z gravatara i mybloglog :D super
Ciesze się, że Ci się podoba. :) Krok po kroku eliminuję wszystkie małe niedociągnięcia.
A ja dodam jeszcze, że w ten niekonwencjonalny sposób można promować niektóre frazy. Wystarczy co jakiś czas zmieniać standardowy napis „Znajdź wpisy…” na coś interesującego / kontrowersyjnego.
Co pewien czas widać takie akcje na największych portalach internetowych typu Onet, Interia i WP choć w ich wersji jest to kolejna forma reklamy (np. „fundusze inwestycyjne”) :-).
Fajny pomysł – można podsunąć hazanowi z antyweb, może na tym coś zarobi. Na małym blogu może „nie klikaj tu…”, albo „zobaczysz, zaraz zniknę” ;).
A jak chce szukac „znajdź wpisy…”? ;)
To faktycznie przydatny feature i dobre argumenty wysunales, by go stosowac. Inna rzecz, ze jak widze cos takiego, to instynktownie po wpisaniu kilku literek czekam na rozwiniecie sie ajaxowego szukania w stylu Google Suggest… Moze to tylko ja?
To klikasz przycisk „ok” :)
Aż takiego zasobu nie mam, żeby było z czego sugestie pobierać a host za uzycie takiego obciążenia bazy danych chyba by mi nogi z siedzenia urwał…
A jak dorobić żeby po dojściu do końca pola zawijał mam tak
I jak będę pisał to ciągnie mi sie to jedną linią :/
Utworz pole typu textarea?
Tak ale wtedy jak dam textarea nie działa mi znikający text
Wtedy zamiast this.value=… powinienes zastosowac odpowiednik do podmiany textu wewnatrz tagow textarea… eee w tej chwili nie kojarze go :D obciach
textarea name=”nazwapola2″ cols=”40″ rows=”5″ onClick=”this.value=””>treść…</textarea
Jak wstawię tak to wtedy po kliknięciu zniknie a jak zrobić żeby sie pojawiło jak delikwent się rozmyśli :D ??
erm zawartosc a nie tresc.
W tresci tej notki zamien „this.value” na „this.innerHTML” i powinno smigac :)
Jestem głupi:D nadal nie wiem jak to zrobić :)
Tego szukałem dzięki! ;-)