Forum.EvoComp.de

[marco]

Hallo,

ich habe folgendes Problem: Ich habe eine Eingabefeld, in dem ein Besucher Suchbegriffe eingeben kann. Das ganze soll aber ohne Buttons oder beschreibenen Text, der sagt, wozu das Feld da ist, nutzbar sein, da mir nicht gerade viel Platz zur Verfügung steht. Deshalb belege ich das Eingabefeld mit dem Text "Ihre Suchanfrage" vor, in der Hoffnung, dass die Suchmöglichkeit auch als solche erkannt wird. Jetzt nervt mich aber die Tatsache, dass nach Anklicken des Feldes erstmal alles markiert werden muss. Und wenn man nicht direkt den Anfang oder das Ende des Feldes trifft, muss man noch die Zeichen vor und nach dem Cursor entfernen. Geht das mit dem Löschen nicht auch autmatisch?

Grüße
Marco

[kalle]

Hi,

sicher klappt das auch automatisch... Immer wenn ein Element durch Maus oder Tastatur aktiviert wird tritt das Event onfocus auf. Das kann mit einem eigenen Eventhandler belegt werden, der darauf reagiert (Hier indem der Handler einfach den Inhalt des Feldes löscht).
Versuchs mal mit folgendem Code:

Code: Alles auswählen

<input id="such" type="text" value="Ihre Suchanfrage" onfocus="document.getElementById ('such').value = '';">


In der onfocus-Eigenschaft steht der JS-Code, der ausgeführt werden soll, wenn das Element aktiviert wird. Hier wird einfach das Feld über seine id aus dem Dokumentenbaum geholt und der Inhalt geändert.

[alm]

Hallo,

dazu brauchst Du nicht erst das Element aus der HTML-Struktur holen, da auch mit this auf das aktuelle Objekt zugegriffen werden kann. Es ist ja bei einem onFocus auf einem Element schon klar, welches Objekt gemeint ist. Einfach nur das Event onFocus nutzen und mit folgender Zeile den Inhalt des Textfeldes löschen:

Code: Alles auswählen

<input type="text" value="Ihre Suchanfrage" onfocus="this.value=''">


Gruß
Alex

[marco]

Hallo,

das sieht ja schon gut aus! Allerdings hab ich jetzt das Problem, dass wenn ich vorher eine Eingabe gemacht habe und aus versehen oder bewusst das Feld verlassen habe (beispielsweise um was zu kopieren um es später im Suchfeld einzufügen), der Inhalt gelöscht wird. Ist in diesem Fall nicht besonders toll, da ich wieder alles neu eingeben muss. Kann statt eines einfachen Befehlsaufrufs auch eine Funktion starten, die vorher fragt, ob das Feld verändert wurde oder kann ich hier nur eine Variable verändern?

Grüße
Marco

[kalle]

Sowohl die Zuweisung von Werten als auch Funktionsaufrufe sind hier erlaubt und Du kannst auch mehrere Aufrufe hintereinander (durch Semikolon getrennt) absetzen. Mit einer Funktion kannst Du das so machen:

Code: Alles auswählen

<input id="such" type="text" value="Ihre Suchanfrage" onfocus="loesche (this)">
<script type="text/javascript">
function loesche (element)
{
   if (element.value == "Ihre Suchanfrage")
      element.value = "";
}
</script>


Ansonsten kann die If-Abfrage auch direkt in onfocus gemacht werden:

Code: Alles auswählen

<input type="text" value="Ihre Suchanfrage" onfocus="this.value = (this.value == 'Ihre Suchanfrage' ? '' : this.value)">


Was jetzt übersichtlicher ist muss jeder selbst entscheiden...