Am primit cateva intrebari de la diversi prieteni care se ocupa de web development ca hobby, iar cea mai des intalnita (din cate imi amintesc) este "Cum pot sa fac sa se schimbe textul de la un input daca utilizatorul da click pe el. Adica sa dispara, si cand iese, sa apara din nou daca nu a scris nimic?"

Daca nu vreti explicatii, sariti la baza paginii unde gasiti codul complet.

Observ ca inca exista developeri care nu inteleg ce inseamna de fapt PHP si JavaScript. Majoritatea isi imaginau ca trebuie sa fie o solutie bazata pe PHP. Ca sa nu mai fie discutii: PHP este un limbaj "server-side" care se executa INAINTE ca utilizatorul sa vizualizeze pagina, iar JavaScript este un limbaj "client-side" care se executa inainte, in timpul, si/sau dupa ce pagina a fost incarcata.

Pe scurt, nu poti folosi PHP pentru a realiza modificari DUPA ce pagina e incarcata.

Solutia intrebarii este destul de simpla. Utilizam JavaScript.
In primul rand, trebuie introdus un cod html in locul in care este input-ul textului. In general asta se foloseste pentru casute de cautare.

<input id="search_box" type="text" value="Caută" />

Ma gandesc ca stiti despre ce e vorba, dar pentru a clarifica: id reprezinta identificator UNIC (si va rog sa nu-l folositi de 2 ori in aceeasi pagina) a casutei de cautare; type e evident, si value reprezinta valoarea initiala ce va fi in casuta. Aceasta va trebui sa dispara la click.
Pentru a obtine rezultatul dorit introducem doua evenimente JavaScript, inline:

• onclick="document.getElementById('search_box').value='';"
• onblur="if(document.getElementById('search_box').value==''){document.getElementById('search_box').value='Caută';}"

onclick are loc in momentul in care se da click pe casuta iar onblur cand se da click in afara casutei. Cu alte cuvinte, ce urmeaza dupa =, intre " " (ghilimele duble) se executa cand are loc evenimentul corespunzator. ID-ul de search_box l-am folosit ca sa ne referim la casuta. Daca de exemplu sunt 2 casute cu acelasi id (nu va mai fi valid XHTML) cand se da click pe una din ele, se va modifica si cealalta.

O mica observatie. Nu am facut verificarea la onclick daca textul initial este "Caută". Cu alte cuvinte, daca se da click pe casuta, continutul se va sterge, indiferent ce text este inauntru.
Pentru a adauga si aceasta facilitate, utilizati un if ca in exemplul de la onblur.

Am folosit cod inline pentru a nu va obliga sa introduceti cod si in header.
Pentru cei ce se grabesc, codul complet se afla mai jos:

---

<input id="search_box" name="search" type="text" value="Caută" onclick="document.getElementById('search_box').value='';" onblur="if(document.getElementById('search_box').value==''){document.getElementById('search_box').value='Caută';}" />


---

Exemplu: