SnippetUI
← Back to snippets

OTP-Eingabefeld

Eine intuitive 6-stellige OTP-Eingabekomponente, die sich bei der Eingabe eines einzelnen Zeichens automatisch fokussiert und mit der Rücktaste zum vorherigen Feld zurückkehrt. Unterstützt auch Einfügen.

HTMLCSSJavaScript

Vorschau

6-stelliges OTP-Eingabefeld. Durch die Eingabe einer Zahl wird automatisch zum nächsten Feld weitergeleitet.

Geben Sie den Bestätigungscode ein
Wenn Sie eine Zahl eingeben, wird diese automatisch zum nächsten Feld verschoben.

Anwendungsfälle und Funktionen

  • Authentifizierungsablauf: Ideal für die Eingabe von SMS-/E-Mail-Authentifizierungscodes, Zwei-Faktor-Authentifizierungsbildschirme (2FA).

  • Einfügeunterstützung: Durch das Einfügen von Zahlen aus der Zwischenablage werden diese automatisch in jedes Feld verteilt.

  • Mobile Optimierung: inputmode="numeric" zeigt automatisch die numerische Tastatur auf Smartphones an.

  • Validierung: Nicht-numerische Eingaben mit „replace(/[^0-9]/g, ”)“ ausschließen.

Design- und UX-Punkte

  1. Boxgröße 52x60px: Optimale Größe für gute Sichtbarkeit und einfache Touch-Bedienung.

  2. transform: scale(1.05) im Fokus: Sie können deutlich erkennen, in welches Feld gerade eingetreten wird.

  3. .filled-Klasse: Visualisieren Sie den Fortschritt, indem Sie die Rahmenfarbe des gefüllten Felds ändern.

So passen Sie es an

Auf 4-stelliges OTP geändert


{/* Eingabeelemente auf 4 reduzieren */}

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

Boxgröße ändern


.otp-box { width: 44px; height: 52px; font-size: 1.25rem; }

Implementierungscode

<div class="otp-inputs" id="otp-inputs">

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

<input class="otp-box" type="text" inputmode="numeric" maxlength="1" />

</div>



<style>
.otp-inputs { display: flex; gap: 0.75rem; }

.otp-box {

width: 52px; height: 60px;

background: rgba(255,255,255,0.06);

border: 2px solid rgba(255,255,255,0.12);

border-radius: 12px;

color: white;

font-size: 1.5rem;

font-weight: 700;

text-align: center;

outline: none;

transition: border-color 0.2s, background 0.2s, transform 0.1s;

}

.otp-box:focus { border-color: #6366f1; background: rgba(99,102,241,0.1); transform: scale(1.05); }

.otp-box.filled { border-color: rgba(99,102,241,0.5); }
</style>



<script>

(function() {

var inputs = Array.from(document.querySelectorAll('#otp-inputs .otp-box'));

inputs.forEach(function(input, i) {

  input.addEventListener('input', function(e) {

    var val = e.target.value.replace(/[^0-9]/g, '');

    e.target.value = val.slice(-1);

    if (val && i < inputs.length-1) inputs[i+1].focus();

    e.target.classList.toggle('filled', !!e.target.value);

  });

  input.addEventListener('keydown', function(e) {

    if (e.key==='Backspace' && !e.target.value && i>0) {

      inputs[i-1].focus(); inputs[i-1].value=''; inputs[i-1].classList.remove('filled');

    }

  });

  input.addEventListener('paste', function(e) {

    e.preventDefault();

    var text = (e.clipboardData || window.clipboardData).getData('text').replace(/[^0-9]/g, '');

    text.split('').forEach(function(ch, j) {

      if (inputs[i+j]) { inputs[i+j].value = ch; inputs[i+j].classList.add('filled'); }

    });

    var nextEmpty = inputs.findIndex(function(inp, j) { return j >= i && !inp.value; });

    if (nextEmpty !== -1) inputs[nextEmpty].focus();

  });

});

})();

</script>

Browserkompatibilitätsstatus

| Browser | Kompatibilitätsstatus |

|--------|-------|

| Chrome 66+ | ✅ Vollständig kompatibel |

| Firefox 63+ | ✅ Vollständig kompatibel |

| Safari 12+ | ✅ Vollständig kompatibel |

| Kante 79+ | ✅ Vollständig kompatibel |

Auf Mobilgeräten zeigt inputmode="numeric" automatisch die numerische Tastatur an, was die Benutzerfreundlichkeit erheblich verbessert.