facebooktwitteryoutube
in Kodowanie - 14 Cze, 2015
by admin - no comments
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:

szukanie-thumb

Zwykłe pole do wyszukiwania, ale możemy zrobić z niego coś więcej:

szukanie2-thumb

  • 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):

<form class="feeder" action="/index.php" method="get">
<input type="text" name="s" class="s" value="">
<input type="submit" value="OK" class="green" />
</form>

ale nas interesuje tylko pole tekstowe (mniej ważną część kodu zastąpiłem znakiem “/**/”):

/**/<input type="text" name="s" class="s" value="" />/**/

1.) chcemy, żeby na początku pole zawierało tekst “Znajdź wpisy…” więc zmieniamy value=” na :

<input /**/ value="Znajdź wpisy...">

2.) tekst ma znikać, gdy klikniemy gdziekolwiek w polu więc dopisujemy:

<input /**/ onfocus="this.value == '';" />

3.) ale tekst ma znikać tylko, gdy użytkownik wcześniej niczego nie wpisał wiec zmieniamy wartość onfocus=”this.value == ”;” na:

<input /**/ onfocus="if (this.value == 'Znajdź wpisy...')
{this.value = '';}" />

(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:

<input /**/ onblur="if (this.value == '')
{this.value = 'Znajdź wpisy...';}" />

(Uwaga: we fragmencie {this.value == ”;} ponownie są dwa apostrofy, czyli ‘ + ‘)

Pod koniec kompletny kod pola tekstowego wygląda mniej więcej tak:

<input type="text" name="s" id="s" value="Znajdź wpisy..."
onfocus="if (this.value == 'Znajdź wpisy...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Znajdź wpisy...';}" />

5.) Gotowe! Jak działa? Możesz sprawdzić na moim polu wyszukiwania. Polecam 😉