Antworten auf deine Fragen:
Neues Thema erstellen

Formular Hinweisfelder

MasterT

Nicht mehr ganz neu hier

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
 

Curanai

Aktives Mitglied

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 ...
Code:
<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

Hat es drauf

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.
HTML:
<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

Aktives Mitglied

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

Hat es drauf

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

Aktives Mitglied

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! :D
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.345
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben