Hallo zusammen, ich würde gerne für ein Konfigurationsformular eine kleine Hilfe realisieren. Beim Klick auf verschiedene Input-Boxen soll jeweils an der gleichen Stelle ein Text erscheinen. Auf JavaScript würde ich gerne verzichten. Auch Tooltips halte ich nur für bedingt geeignet mit Blick auf Touchscreens. Wünschenswert wäre also eine reine HTML(5) + CSS-Lösung. Beispiel, beim Klick auf ein Textfeld erscheint der jeweilige <Hilfetext>: <Hilfetext> Name : [_____________] Vorname : [_____________] Alter : [_____________] Gruß Dennis
1 | <input ...><span class="help">bla</span> |
1 | .help { |
2 | display: none; |
3 | } |
4 | |
5 | input:focus + .help { |
6 | display: block; |
7 | } |
ungetestet, nur eine idee
Daniel F. schrieb: > ungetestet, nur eine idee Schon ein guter (funktionierender) Ansatz, vielen Dank! Fehlt nur die Funktion, den Text immer an der gleichen Stelle zu platzieren. Da werde ich mal rumgooglen. Gruß Dennis
Dennis S. schrieb: > den Text immer an der gleichen Stelle zu platzieren. dreckige lösung: mit css (position: absolute) verschieben ;-)
Daniel F. schrieb: > dreckige lösung: mit css (position: absolute) verschieben ;-) Jaaa... ich hatte gehofft mir die Hände nicht SO dreckig machen zu müssen! ;-)
martin schrieb: > Wie wäre es mit Placeholdern in den Eingabefeldern? > > Beispiel: https://jsfiddle.net/6r6drn26/ Da habe ich drüber nachgedacht. Leider beißt sich das dann (afaik) mit eventuell bereits vorhandenen Standard-Werten die bereits eingegeben sind.
martin schrieb: > Habe etwas weitergebastelt: > https://jsfiddle.net/5m35pba2/3/ Richtig gut, vielen Dank! :-) Ich nehme mal an das Ganze beim Reinklicken zu realisieren ist nicht so einfach? Man müsste dann ja auch definieren, wann der Text wieder verschwinden soll...
:
Bearbeitet durch User
Dennis S. schrieb: > Daniel F. schrieb: >> dreckige lösung: mit css (position: absolute) verschieben ;-) > Jaaa... ich hatte gehofft mir die Hände nicht SO dreckig machen zu > müssen! ;-) Nö, mit CCS geht sowas ganz elegant. Javascript passt dort ind Q&D.
Alexander J. schrieb: > Dennis S. schrieb: >> Daniel F. schrieb: >>> dreckige lösung: mit css (position: absolute) verschieben ;-) >> Jaaa... ich hatte gehofft mir die Hände nicht SO dreckig machen zu >> müssen! ;-) > > Nö, mit CCS geht sowas ganz elegant. Javascript passt dort ind Q&D. CCS? Oder CSS? Der zweite Satz ist mir völlig schleierhaft ehrlich gesagt...
Dennis S. schrieb: > martin schrieb: >> Habe etwas weitergebastelt: >> https://jsfiddle.net/5m35pba2/3/ > > Richtig gut, vielen Dank! :-) > > Ich nehme mal an das Ganze beim Reinklicken zu realisieren ist nicht so > einfach? ersetze :hover durch :focus, dann klappt das auch wenn man die Maus nicht nutzt :)
Dennis S. schrieb: > Ich nehme mal an das Ganze beim Reinklicken zu realisieren ist nicht so > einfach? Geht. https://jsfiddle.net/5m35pba2/4/ Verschwindet beim rausklicken.
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.