Sie sind hier:
»
PC + Co.
»
Javascript
»
Suchtext
Javascript - Suchtext
Jede Seite hat eine Eingabemaske für die Suche. Darin prankt
zunächst das Wort "Begriff". Bei Mausklick darauf wird die
Eingabezeile geleert.
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();">
(...)
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>
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