Forum: PC Hard- und Software HTML-Formular: Text bei Klick auf Textfeld


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
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

von Daniel F. (df311)


Bewertung
1 lesenswert
nicht lesenswert
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

von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
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

von Daniel F. (df311)


Bewertung
0 lesenswert
nicht lesenswert
Dennis S. schrieb:
> den Text immer an der gleichen Stelle zu platzieren.

dreckige lösung: mit css (position: absolute) verschieben ;-)

von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
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! ;-)

von martin (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Wie wäre es mit Placeholdern in den Eingabefeldern?

Beispiel: https://jsfiddle.net/6r6drn26/

von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
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.

von martin (Gast)


Bewertung
1 lesenswert
nicht lesenswert
Habe etwas weitergebastelt:
https://jsfiddle.net/5m35pba2/3/

von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
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
von Alexander J. (Gast)


Bewertung
0 lesenswert
nicht lesenswert
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.

von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
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...

von Dirk D. (dicky_d)


Bewertung
0 lesenswert
nicht lesenswert
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 :)

von martin (Gast)


Bewertung
1 lesenswert
nicht lesenswert
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.

von Dennis S. (eltio)


Bewertung
0 lesenswert
nicht lesenswert
Ich bin begeistert! Vielen Dank an alle.

Gruß

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.