Aug 24

Ersatz für onfocus/onblur

Allgemeines Kommentar hinzufügen

Im Web findet man sehr oft kleine JavaScript-Snippets die beim Aktivieren eines Textfeldes den Standard-Wert entfernen und bei leerem Feld diesen wieder einfügen. Der Code dazu sieht in etwa wie folgt aus:

<input type="text" name="text" value="Standard"
  onfocus="if (this.value == 'Standard') { this.value = ''; };"
  onblur="if (this.value == '') { this.value = 'Standard'; };" />

Das hat meiner Meinung nach zwei sehr große Nachteile: Zum einen geht der Standard-Wert automatisch verloren und man kann diesen nicht bearbeiten (sollte man diesen brauchen), zum anderen ist es nicht möglich das Feld leer zu lassen, außer der onblur-Event wird nicht eingefügt.

Abhilfe schafft die JavaScript-Funktion select() die den Text des Eingabefeldes markiert – der Code sieht dann in der einfachsten Form wie folgt aus:

<input type="text name="test" value="Standard" 
  onfocus="this.select();" /> 

Möchte man den HTML-Code frei von JavaScript-Funktionen halten, so kann man dies für alle Textfelder sehr einfach, in diesem Fall mit MooTools realisiert, bewerkstelligen:

window.addEvent('domready', function() {
  $$('input[type=text]').addEvents({ 'focus': function() { this.select(); } });
});


Verwandte Beiträge

Kommentar schreiben