Vorbelegte Eingabe in Suchfeld bei Anklicken löschen

Fragen und Antworten zur clientseitigen Programmiersprache JavaScript

Vorbelegte Eingabe in Suchfeld bei Anklicken löschen

Beitragvon marco am Do 12. Feb 2009, 12:25

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
marco
 
Beiträge: 12
Registriert: Do 6. Mär 2008, 13:18
Posts

Beitragvon kalle am Do 12. Feb 2009, 12:28

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.
kalle
 
Beiträge: 11
Registriert: Do 6. Mär 2008, 13:25
Posts

Beitragvon alm am Do 12. Feb 2009, 12:30

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
Zuletzt geändert von alm am Do 12. Feb 2009, 12:48, insgesamt 1-mal geändert.
EvoComp.de
Beachten Sie unsere Beispiele zu JavaScript, PHP und Ajax, sowie unser PHP MySQL Tutorial
alm
 
Beiträge: 81
Registriert: Do 21. Feb 2008, 16:22
Posts

Beitragvon marco am Do 12. Feb 2009, 12:34

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
marco
 
Beiträge: 12
Registriert: Do 6. Mär 2008, 13:18
Posts

Beitragvon kalle am Do 12. Feb 2009, 12:37

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...
kalle
 
Beiträge: 11
Registriert: Do 6. Mär 2008, 13:25
Posts


Zurück zu JavaScript

cron