Textfeldvorbelegung per Javascript / Mootools leeren

Ich sollte gerade für ein Projekt kleinere Anpassungen machen. Da dieses Thema des öffteren benötigt wird schreib ich mal eben den kleinen Javascript-Schnipsel hier nieder. Es beruht auf dem Mootools-Framework und wurde mit Contao 2.9.5 getestet. Es dürfte aber auch mit anderen Versionen funktionieren da es nur die Core-Funktion benutzt.

In diesem Beispiel geh ich davon aus das das Suchformularfeld mit der id="ctrl_keywords" verwendet wird.

folgender Code überprüft ob das vorbelegte Wort "Suchbegriff" enthalten ist und blendet es nur in diesem Fall aus. Wenn das Feld verlassen wird und kein Wert eingegeben wurde dann wird dem Eingabefeld (input) das Wort "Suchfeld" zugewiesen.

Javascript:

window.addEvent('domready', function(){
    var el = $('ctrl_keywords');
    var val = 'Suchbegriff';
    
    el.addEvents({
        click: function(){
            if(el.value == val) el.value = '';    
        },
        blur: function(){
            if(el.value == '') el.value = val;    
        }
    });
});

Das HTML vom Suchformular:

<form action="suche.html" method="get">
    <div class="search">
        <input type="text" name="keywords" id="ctrl_keywords" class="text" value="Suchbegriff" />
        <input type="submit" class="submit" value="LOS" />
    </div>
</form>