Live-Passwortregeln im Tooltip
Beim Fokussieren des Passwortfelds öffnet sich ein Tooltip mit Stärkeanzeige und Regeln, die sich beim Tippen abhaken.
Einstellungen
Code
<div class="uvq08-pwd"><label for="uvq08-pwd-i">Neues Passwort</label><span class="fw pk"><input id="uvq08-pwd-i" type="password" autocomplete="new-password" spellcheck="false" aria-describedby="uvq08-pwd-t"><button type="button" class="ey" aria-label="Passwort anzeigen" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path class="oder" d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z"/><circle class="oder" cx="12" cy="12" r="3"/><path class="x" d="M4 4l16 16"/></svg></button><span class="tt" role="tooltip" id="uvq08-pwd-t" data-l="0"><span class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="lv"><span>Fang an zu tippen</span><span>Schwach</span><span>Ausreichend</span><span>Gut</span><span>Stark</span></span><span class="ru" data-r="len"><i aria-hidden="true"></i>Mindestens 8 Zeichen</span><span class="ru" data-r="up"><i aria-hidden="true"></i>Ein Großbuchstabe</span><span class="ru" data-r="num"><i aria-hidden="true"></i>Eine Zahl</span><span class="ru" data-r="sym"><i aria-hidden="true"></i>Ein Sonderzeichen</span></span></span></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Ein Passwortfeld, dessen Tooltip bei Fokus oder Hover erscheint, mit vierstufiger Stärkeanzeige, Stufenbezeichnung und vier Regeln für Länge, Großbuchstabe, Zahl und Sonderzeichen. Jede Regel bekommt einen animierten Haken, sobald sie erfüllt ist, und das Feld ist per aria-describedby mit dem Tooltip verbunden. Ein Augen-Button blendet den Text ein oder aus. Passt zu Registrierung, Passwort-Reset und Kontoeinstellungen.
Die Hauptfarbe markiert ein starkes Passwort und erfüllte Regeln, die Zweitfarbe die mittlere Stufe. Passe die regulären Ausdrücke im Skript an deine Richtlinie an und beschränke die Liste auf vier oder fünf klare Regeln.