Axels Homepage


Sie sind hier: » PC + Co. » Javascript » Suchtext

Javascript - Suchtext

Was es braucht ...

Das ist ganz einfach! Na gut, das kann jeder sagen...
Wir brauchen in unserem Stückchen Code:
  • eine Anweisung, die in einem Eingabefeld einen Text setzt
  • die Zuweisung einer Funktion "Text löschen", wenn jemand den Cursor auf die Eingabemaske setzt
  • eine Variable, die sich merkt, ob schon einmal der Text gelöscht worden ist. Schliesslich soll die Eingabe nicht immer wieder verschwinden.

Seitenanfang


... und wie es geht

Ok, jeder Browser hat die Funktion "View Source" - da kann man sich es sich ja schon ansehen. Es sind nur keine Kommentare drin :-)

Im HTML-Code findet man irgendwann das Formular zur Suchmaske. Ich bevorzuge es, den Dingen einen Namen zu geben. Und so bekommt das Formular als auch die gewünschte Eingabezeile mit Hilfe des Attributes "name" einen Namen:

  <form name="simplesearchform" action="/axel/ergebnis.htm" method =" POST">
  (...)
  <input name="query" value="" type="text" size="7"  maxsize="30" onFocus="DelValue();">
  (...)
HTML: Suchformular


Bei der Eingabezeile ist dem Event OnFocus() - also bei Aktivierung des Feldes - eine Javascript-Funktion zugewiesen. Und diese wiederum sieht so aus:

  (...)
  <script LANGUAGE="JAVASCRIPT" TYPE="text/javascript">
    document.simplesearchform.query.value="Begriff";
    var bDelete=true;
    function DelValue()
    {
      if(bDelete)
      {
        document.simplesearchform.query.value="";
        bDelete=false;
      }
    return true;
    }
  </SCRIPT>
Javascript: Textfeld verarbeiten


Beim Aufbau der Seite im Broser wird der innerhalb des SCRIPT-Tags enthaltene Code durchlaufen - jedoch nicht die dortige Funktion.
Da ich meinem Formular und der Eingabezeile einen Namen gegeben habe, kann ich dessen Elemente mit document.simplesearchform.query.value ansprechen und einen Wert setzen. Zunächst wird mein Defaultwert "Begriff" hineingeschrieben.
Darunter folgt die Flag-Variable, die sich merken soll, ob der Text gelöscht werden soll.

Wenn die Funktion DelValue() aufgerufen wird, wird die Flag-Variable geprüft - ist sie noch true, wird das Eingabefeld gelöscht und deren Wert auf false gesetzt. Damit wird beim zweiten Klick das dFeld nicht mehr gelöscht.

Seitenanfang

 
©2010 by Axel Hahn - powered by
Valid HTML 4.01!