Sie sehen diese Texteingabefelder von Zeit zu Zeit im Internet: Ein graues Etikett wird in der Box angezeigt, aber sobald Sie dort eingeben, verschwindet der graue Text. Diese Seite hat sogar einen: Das Feld "Titel" verhält sich genau so.
Also, Fragen:
Gibt es dafür einen Standardbegriff? Ich habe wirklich Mühe, bei Google etwas zu finden
Kann es nur mit CSS gemacht werden?
Falls dies nicht gelingt, kann dies mit lokalem JavaScript geschehen? (dh Code nur innerhalb des Tags, nicht im HTML-Header).
Ich kenne keine Möglichkeit, dies mit CSS zu tun. Aber wenn man sich die Seitenquelle anschaut, macht SO es so:
%Vor%Die mittlere Zeile, die mit "onfocus" beginnt, ist die Stelle, an der die Arbeit stattfindet. Wenn das Textfeld den Fokus erhält, prüft es, ob der Standardwert ("Suche") vorhanden ist. Ist dies der Fall, wird der Wert auf '' (leere Zeichenfolge) gesetzt. Ansonsten ist der Text nicht betroffen.
Ein potenzielles Problem hier ist, dass, wenn jemand versucht, nach dem Wort "Suche" zu suchen, dann außerhalb des Feldes klickt und wieder einklickt, wird der Text zurückgesetzt. Kein großes Problem, aber etwas, das Sie im Auge behalten sollten, während Sie arbeiten.
Wenn Sie dies nur mit HTML + CSS nur möchten, können Sie versuchen, das neue HTML5-Attribut placeholder input zu verwenden. Leider wird dieses Attribut nicht häufig unterstützt. Versuchen Sie daher, ein Skript wie Modernizr zu verwenden, um die Browserunterstützung für diese Funktion für ein Feature wie dieses zu erkennen .
Ich würde nicht empfehlen, Inline-Javascript dafür zu verwenden - es ist eine schlechte Praxis und widerspricht dem Prinzip der Trennung von Inhalt und Verhalten. Mit jQuery funktioniert beispielsweise so etwas:
%Vor%Es gibt eine HTML-Funktion für neue Browser.
Verwenden Sie einfach das Attribut "Platzhalter":
& lt; input id="inputbox" type="text" placeholder="Tipptext hier" & gt;
%Vor%
Aber du kannst keine Kinder von Eingaben (AFAIK) haben, also funktioniert nicht .
Tags und Links javascript html css label textbox