Wenn man ein Suchfeld auf der Seite hat, dann steht oft in dem Feld selber “Suche…” um Platz zu sparen.

Nun muss also beim klick in das Suchfeld der Text “Suche…” verschwinden.

Wie macht man das?

1. Beispiel früher:

<input type="text" value="Suche..." onFocus="this.value=''">

Das ist natürlich nicht so schön, wenn wir wieder aus dem Feld klickt und wieder hinein. Dann ist der Text wieder weg.
Also noch eine Prüfung mit rein:

2. Beispiel früher:

 <input type="text" value="Suche..." onFocus="if(this.value == 'Suche...'){ this.value = '';}">
 

Nun wollen wir auch noch, dass wenn wir das Feld leer lassen und rausgehen, wieder “Suche…” drin steht.

3. Beispiel früher:

 <input type="text" value="Suche..." onFocus="if(this.value == 'Suche...'){ this.value = '';}" onBlur="if(this.value==''){this.value='Suche...';}">
 

Funktioniert, ist aber nicht allzu schön.
Nun zeige ich einmal, wie man das ganze mit jQuery machen kann.

Beispiel jQuery:

<input type="text" value="Suche..." id="suche">

$(function(){
    $('#suche').focus(function(){
        if($(this).val() == "Suche...") $(this).val('');
    }).blur(function(){
        if($(this).val() == "") $(this).val('Suche...');
    });
});

Sieht doch schon übersichtlicher aus. Auf diese Weise können wir unseren Quellcode sauber halten und einfacher Änderungen an der jQuery Funktion vornehmen.

Man könnte zum Beispiel beim Focus noch eine Suggest Suche aktivieren.

Dies soll nur ein kleines Beispiel sein, wie man Suchfelder mit jQuery manipulieren kann.

Schönen Abend.