Benutzer-Werkzeuge
php:otpauth_formular
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
|
php:otpauth_formular [2024/11/18 11:12] webproducer angelegt |
php:otpauth_formular [2025/03/26 14:16] (aktuell) webproducer Beispiel für 6 einzelne Zahlenfelder |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| ====== HTML-Login-Formular mit "Benutzername", "Passwort" und "Token" ====== | ====== HTML-Login-Formular mit "Benutzername", "Passwort" und "Token" ====== | ||
| + | |||
| + | Hier ein Beispiel für 6 einzelne Eingabefelder, welche ausschließlich Zahlenwerte erlauben: | ||
| + | |||
| + | === HTML === | ||
| <code php> | <code php> | ||
| Zeile 5: | Zeile 9: | ||
| <input id="user-text-field" type="email" autocomplete="username"/> | <input id="user-text-field" type="email" autocomplete="username"/> | ||
| <input id="password-text-field" type="password" autocomplete="current-password"/> | <input id="password-text-field" type="password" autocomplete="current-password"/> | ||
| - | <input id="single-factor-code-text-field" autocomplete="one-time-code"/> | + | <div class="col-two-third" id="mfa_container"> |
| + | <input type="text" id="token_1" name="token[1]" maxlength="1" autocomplete="one-time-code" /> | ||
| + | <input type="text" id="token_2" name="token[2]" maxlength="1" autocomplete="one-time-code" /> | ||
| + | <input type="text" id="token_3" name="token[3]" maxlength="1" autocomplete="one-time-code" /> | ||
| + | <input type="text" id="token_4" name="token[4]" maxlength="1" autocomplete="one-time-code" /> | ||
| + | <input type="text" id="token_5" name="token[5]" maxlength="1" autocomplete="one-time-code" /> | ||
| + | <input type="text" id="token_6" name="token[6]" maxlength="1" autocomplete="one-time-code" /> | ||
| + | </div> | ||
| </form> | </form> | ||
| </code> | </code> | ||
| Hinweis: Das Attribut "autocomplete" ist hierbei wichtig, damit der Token oder bei Apple auch Bestätigungscode genannt, automatisch in das Token-Feld übernommen werden kann. | Hinweis: Das Attribut "autocomplete" ist hierbei wichtig, damit der Token oder bei Apple auch Bestätigungscode genannt, automatisch in das Token-Feld übernommen werden kann. | ||
| + | |||
| + | === JavaScript / jQuery === | ||
| + | |||
| + | <code javascript> | ||
| + | <script lang="js"> | ||
| + | $( "#mfa_container input" ).keyup( function( e ) { | ||
| + | if( e.which < 96 || e.which > 105 ) { // nur 0-9 erlauben | ||
| + | this.value = ''; | ||
| + | } else if( this.value.length == this.maxLength ) { | ||
| + | $( this ).next('input').focus(); // zum naechsten Feld springen | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
| + | </code> | ||
| + | |||
| + | === CSS === | ||
| + | <code css> | ||
| + | #mfa_container { | ||
| + | display: flex; | ||
| + | flex-direction: row; | ||
| + | height: 64px; | ||
| + | } | ||
| + | |||
| + | #mfa_container input { | ||
| + | text-align: center; | ||
| + | margin-left: 10px; | ||
| + | border-width: 2px; | ||
| + | font-size: 20px; | ||
| + | } | ||
| + | </code> | ||
php/otpauth_formular.1731924720.txt.gz · Zuletzt geändert: 2024/11/18 11:12 von webproducer
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
