Formular Hinweisfelder

[MasterT]

Hallo,
ich habe ein Formular bei dem ich gerne Hinweise mit einem Objekt anzeigen möchte (Passwort muss aus x und x usw.), sobald man das Inputfeld im Focus nimmt. Wie setze ich das am besten um? Mit Javascript und CSS würden mir jetzt einfallen, aber weiß nicht welche Lösung die bessere ist

Lg

 

[Aelfry]

Mit Javascript und CSS würden mir jetzt einfallen

Dann mach es doch mit JS / CSS. Solch eine Interaktivität wirst du mit PHP nicht hinbekommen.

 

[Curanai]

Guten Morgen,

onfocus() auf dem Input-Feld benötigst Du für den Trigger der Anzeige - diese macht via CSS einen vorher ausgeblendeten (display:none) Bereich an einer von Dir gewählten Position sichtbar.

onblur() ergänzt und schon verschwindet der Text, sobald Du das Input-Feld verlässt.

Unkonventionell mal hier in die Box gehackt wäre das sowas wie ...

<b>Benutzername:</b><br />
<input type="text" name="username" onfocus="zeig('u_help')" onblur="weg('u_help')" />
<div id="u_help" style="display:none">
Ich werde wohl eingeblendet, habe meinen ganzen Text aber bereits dabei ...
</div>

JavaScript hingegen - und das kriegst bestimmt hin - entnimmt lediglich das style-Attribut oder setzt es wieder ein (bei Prüfung mit einer if-Abfrage vorweg, was er machen soll, lässt es sich größtenteils automatisieren). Mit jQuery lässt es sich auch toggle'n oder sogar mit fadeIn().show() direkt anzeigen oder ausblenden.

zeig() und weg() oben sind selbstredend kombinierbar - bitte nicht falsch verstehen. Es dient nur der Orientierung des TO, damit dieser direkt weiß, welcher Handler was macht. Gleiches gilt für das Inline-CSS ... nicht schön, soll nur erklären!

Viel Erfolg.

 

[Myhar]

Und wieso macht man das dann nicht nur per CSS? Das war ja wohl die Frage des TO, wenn er eine Möglichkeit hat, es rein per CSS einzubinden, dann sollte er auch diese nehmen.

<label for="name" >Ein Label für den Benutzername:</label>
<input type="text" id="name" name="name" aria-describedby="hint1"/>
<p id="hint1" role="tooltip">
Ich bin ein Paragraph und kein div, da hier auch ein sinnvoller Inhalt steht.
</p>

input + p{display:none}
input:focus + p{display:block}

Edit: Jetzt sogar mit Wai-ARIA, hoffentlich auch korrekt verwendet.

 

[Curanai]

Hey, interessant ... das "+" kannte ich als Selector im CSS irgendwie gar nicht. *yay* ...
[id~=hint] hätte ich genommen, um bei Deinem Beispiel zu bleiben. Und ansonsten sprach der TO selbst von "JavaScript und CSS".

WAI-ARIA sieht recht vielversprechend. Nur wenn ich mir ausmale, wieviel Attribute mittlerweile für alles mögliche gesetzt werden/werden sollen, bremst mir das die Idee von schnellen Seiten dann doch in Teilen wieder aus (bspw. in Anlehnung an Mikroformate etc.). Oder lässt sich dies "sinnvoll steuern" - kann man auf der Seite "erkennen", dass es benötigt wird?!

Danke.

 

[Myhar]

Hey, interessant ... das "+" kannte ich als Selector im CSS irgendwie gar nicht. *yay* ...

Dann beschäftige dich einmal mit CSS2 (nicht CSS3)

[id~=hint] hätte ich genommen, um bei Deinem Beispiel zu bleiben. Und ansonsten sprach der TO selbst von "JavaScript und CSS".

Wo hättest du das genommen?

WAI-ARIA sieht recht vielversprechend. Nur wenn ich mir ausmale, wieviel Attribute mittlerweile für alles mögliche gesetzt werden/werden sollen, bremst mir das die Idee von schnellen Seiten dann doch in Teilen wieder aus (bspw. in Anlehnung an Mikroformate etc.). Oder lässt sich dies "sinnvoll steuern" - kann man auf der Seite "erkennen", dass es benötigt wird?!

WAI-ARIA ist dazu gedacht um auch Menschen den Inhalt zugänglich zu machen, die nicht unbedingt über die selben Möglichkeiten verfügen wie wir sondern ZB Screenreader etc. verwenden müssen. Man kann mir nicht sagen, dass diese paar aria-Attribute so viel mehr zu einer langsamen Seite beitragen wie der oft unnötige Einsatz von Javascript (bzw. jQuery)
Siehe dein onfocus + onblur Beispiel in diesem Thread, das ist bestimmt langsamer als die aria-Attribute.

 

[Curanai]

Deutlich zu kurz gedacht oder nicht vollends verstanden - aber mir scheint, dass Du heute bei sonnigem Wetter eine gewittrige Stimmung hast, was ein Folgegespräch deutlich erschwert und mir keinen Spaß derart macht - so war meine Frage eher nach einer "Weiche" als einem "was es soll" bzw. den Zweck. Wie dem auch sei ... wünsche Dir "gute Besserung" für den heutigen Tag, Myhar.

@MasterT: Ja, die CSS Version von Myhar ist selbstredend kürzer - keine Frage. Alles andere ist Humbug und gehört auf den Müll (weniger Ironie drin als man jetzt wohl meinen könnte).

Beste Grüße - übrigens lasst mal fein die Sonne alle rein!

 

[Duddle]

Möchtest du, dass das Formular gleich die Eingaben validiert? Oder reicht dir ein Hinweis?
Für ersteres gibt es unzählige PlugIns für jQuery, z.B. http://jqueryvalidation.org/
Für letzteres kannst du nach "jQuery Tooltip" suchen und findest mehrere Ansätze, z.B. das von jQuery-UI eigene https://jqueryui.com/tooltip/



Duddle