Ausgegrauter Text in HTML Formular

Hallo,

ist es in HTML/CSS möglich einen Text in einem Formular (input type=„text“) auszugrauen? Mit „value“ muss die Vorgabe ja erst aus dem Formular gelöscht werden. Ich möchte einen Text, der verschwindet sobald man in das Textfeld klickt. Wird das Textfeld nicht verwendet, soll auch kein Wert übermittelt werden (was bei „value“ leider nicht der Fall ist). Ich bilde mir ein, dies schon einige male im Internet gesehen zu haben.

Schöne Grüße

Hallo sax,

setzte für das Inputfeld: disabled=„disabled“

Gruß
Klaus

Hallo Klaus,

danke für deinen Post. Allerdings ist nun das ganze Textfeld gesperrt. Ich möchte einen ausgegrauten Hinweiswtext in meinem Textfeld, der nicht mit dem Formular übermittelt wird wenn das Textfeld leer bleibt. Das Textfeld soll allerdings editier bleiben!

Hallo sax,

danke für deinen Post. Allerdings ist nun das ganze Textfeld
gesperrt. Ich möchte einen ausgegrauten Hinweiswtext in meinem
Textfeld, der nicht mit dem Formular übermittelt wird wenn das

Du kannst natürlich mit javascript vor dem Absenden prüfen, ob es sich um den Hinweistext handelt und dann value auf „“ setzen …
aber es ist einfacher, wenn es das Empfangs-Script überprüft

Textfeld leer bleibt. Das Textfeld soll allerdings editier
bleiben!

setzte das textfeld mit style.backgroundColor=„silver“ oder in das Grau Deiner Wahl

Gruß
Klaus

Moin!

Ich möchte einen
Text, der verschwindet sobald man in das Textfeld klickt.

Das ist Dynamik, die mit HTML/CSS nicht möglich ist.
Dafür ist JavaScript geeignet.

Grüße,
Efchen

Hallo sax,

Deine Anfrage war hier schon richtig:

ist es in HTML/CSS möglich einen Text in einem Formular
(input type=„text“) auszugrauen? Mit „value“ muss die Vorgabe

es geht um die css-Eigenschaft des input-tags: background-color / backgroundColor

ob das jetzt mit X :hover oder mit X.style.backgroundColor geschieht und/oder dynamisch … ist zweitrangig!!

mfg
Klaus

Hi,

Genau das hab ich mich vor einer Woche auch noch
gefragt, hier ist die Lösung:

Man braucht eigentlich nichts von JS zu verstehen,
mit ein bisschen experimentieren weiss man schnell
für was welche Angabe steht :wink:

Die Farben können beliebig geändert werden, ebenso
die Textvorgabe (im Beispiel „Suche…“).
Auch können weitere

this.style.irgendwas='wert';

hinzugefügt werden.
Bei Fragen melde dich!

LG
Demii

Moin!

Bei Fragen melde dich!

Ich hab noch ne Frage!

Wie sollen die Nutzer, bei denen JavaScript deaktiviert ist, das verstehen, dass das Feld ausgegraut ist und ausgegraut bleibt, wenn sie rein klicken? Die werden denken, dass sie hier keine Angaben machen können!

Liebe Grüße,
-Efchen

Hi,

Ja, diesem Problem ist meine
Lösung noch nicht gewachsen…

Entweder man baut irgendwas ein,
was dem Benutzer mitteilt, dass
die Seite nur mit JS funktioniert
(wie bei wer-weiss-was), oder
mann lässt das ausgrauen ganz weg.

Bin offen für neue Kritik
LG Demii

Boah ey! :smile:

Entweder man baut irgendwas ein,
was dem Benutzer mitteilt, dass
die Seite nur mit JS funktioniert

Bisschen mehr Fantasie! Als Entwickler (egal ob Programmierer oder Webentwickler o.ä.) sollte man doch ein bisschen davon mitbringen.

Das Feld wird per CSS ganz normal gestyled.

Ausgegraut wird es nach dem Laden der Seite per JavaScript. Wenn JS nicht aktiviert ist, ist das Feld auch nicht ausgegraut.

Alle anderen Dinge geschehen ja eh nur über die JS-EventHandler und kommen bei abgeschaltetem JS gar nicht zum tragen.

Fertig :smile:

Natürlich wird man sich hüten, wegen eines Ausgrauens den Leuten vorzulügen, die Site würde nur mit JS funktionieren. Besser kann man Leute gar nicht vergraulen.

Angenehmes Wochenende zusammen,
-Efchen

2 Like

Hi,

Da hast du natürlich vollkommen recht!

Ich habe mir überhaupt keine Gedanken
gemacht, wie man das lösen könnte
(ausser meinen faulen „Lösungen“),
denn im Hinterkopf hatte ich immer:
„Heutzutage hat ja eh jeder JS aktiviert“,
was natürlich nicht ganz stimmt…

Danke, dass du mich darauf hingewiesen hast
LG Demii

Hallo,

danke für die Lösung, funktioniert soweit sehr gut. Da Javascript anscheinend in allen gängigen Browsern standardmäßig aktiviert ist, sollten sich die Probleme diesbezüglich doch in Grenzen halten.

Hallo Demii,

vielen Dank für deine Nachricht. Ich hoffe ich darf deinen neuen, verbesserten Code posten (funktioniert wunderbar):