Eingabemasken und UX-Formulare

1) Grundsätze

1. Helfen, nicht bestrafen. Die Maske leitet die Eingabe und reduziert Fehler, blockiert aber nicht das Drucken und Einfügen.
2. Daten ≠ Anzeige. Wir speichern „rohe“ normalisierte Werte, wir formatieren nur in der Benutzeroberfläche.
3. Vorhersehbarer Cursor. Jede Auto-Substitution „springt“ nicht caret und bricht nicht undo/redo.
4. Ort und Gerät. Tastaturen, Trennzeichen, Kalender und Währungen - nach Region und Plattform.
5. Zugänglichkeit und Privatsphäre. Text + Symbol/Farbe; sensible Felder maskieren, aber Passwortmanager/Autofill nicht stören.

2) Wann die Maske angemessen ist (und wann nicht)

• Formate mit stabiler Struktur: Telefon, IBAN, PAN (Karten), CVC, Datum, Uhrzeit, Index, OTP.
• Geldbeträge mit Trennzeichen (im Druck - „saubere“ Eingabe, im Blues - Format).
• Codes (Ref. Codes, Promo), feste Längen.

• Namen/Adressen/E-Mail (Maske begrenzt zulässige Zeichen/Sprachen).
• Komplexe freie Felder (Kommentare, Firmennamen).
• Eingabe mit potenziell unbekanntem Format (internationale Nummern ohne Land).

3) Maske vs Auto-Format vs Validierung

Maske - Strukturhinweis „on the fly“ (Klammern, Bindestriche); darf die Eingabe/Einfügung nicht brechen.
Auto-Format - Anwendung bei Blues/Fokusverlust (Tausende, IBAN-Leerzeichen).
Validierung - Logik der Korrektheit (Länge, Prüfsummen), Anzeige von Fehlern nach 'blur' oder 'submit'.

Die Regel: Die Maske ersetzt nicht die Validierung, und das Autoformat darf die Bedeutung des Eingeführten nicht verändern.

4) Tastaturen und HTML-Attribute

5) Kutsche, Kopipast und Normalisierung

Caret nicht brechen: Passen Sie beim automatischen Einfügen von Zeichen (Leerzeichen/Klammern) die Position des Cursors an.
Copypast: Beim Aufstehen Leerzeichen/Bindestriche entfernen → validieren → mit Formatierung anzeigen.
Normalisierung: Trimmen, Ersetzen von „Kurven“ -Symbolen („O'→'0“ ist nicht möglich!), Großschreibung für IBAN, einheitliches Datumsformat im Speicher (ISO).

js const clean = s => s. replace(/[^\da-zA-Z]/g,'');
const normalizePAN = s => clean(s). slice (0.19) ;//no spaces/hyphens const normalizeIBAN = s => clean (s). toUpperCase();   // A–Z0–9

6) Zahlen, Währungen und Orte

Eingabe „wie gedruckt“ (Toleranz', 'oder'. 'als Trennzeichen), Speicherung in Minoreinheiten (Kopeken/Cent).
Anzeige nach Ort (Gruppierung von Tausenden) auf dem Blues/nach dem Submit; im Fokus, zeigen Sie den „rohen“ Wert für einfache Bearbeitung.
Geben Sie die Währung explizit an und erfassen Sie die Genauigkeit (z. B. 2 Zeichen).

js function parseMoney(input) {
//resolve both comma and period as decimal const s = input. replace(/\s/g,''). replace(',', '.');
const num = Number(s);
if (Number. isNaN(num)) return null;
return Math. round(num 100); // cents
}

function formatMoney(cents, locale='ru-RU', currency='RUB') {
return (cents/100). toLocaleString(locale, { style:'currency', currency });
}

7) Datum und Uhrzeit

Wenn native Pickers auf Plattformen unbequem/unterschiedlich sind, verwenden Sie das Textfeld mit der Maske' DD. MM. JJJJ', aber ISO 'JJJJ-MM-TT' aufbewahren.
Realitätscheck der Daten (29. 02, Bereiche), Zeitzonen - auf dem Server.
Fügen Sie die Schaltflächen Heute, Jetzt und Löschen hinzu.

8) Telefone und Länder

Zwei Felder: Land (+ Code) und Nummer oder Smart-Maske nach ausgewähltem Land.
Wenn Sie ein vollständiges'+ CC... 'einfügen, füllen Sie das Land automatisch aus.
Speichern Sie E.164 ('+ CCXXXXXXXXX'), zeigen Sie lokal mit Leerzeichen.

9) Zahlungsdetails: PAN/IBAN/CVC/EXP

PAN: Gruppierung 4-4-4-4/4; im Wert - nur Zahlen; Luhn-check; keine Protokolle/Analysen mit PAN.
CVC: 'password' -Stil (versteckt), 'autocomplete =' cc-csc'', nicht im Entwurf speichern.
EXP: 'MM/YY', Auto-Einfügung '/' nach 2 Stellen, Überprüfung des Bereichs 01-12 und eines angemessenen Jahres.
IBAN: oberer Fall, Leerzeichen nur in der Benutzeroberfläche; Überprüfung der Landeslänge und der Prüfsumme.

10) OTP/Bestätigungscode

6 (oder N) Zellen mit Autofokus und Auto-Übergang, Einfügen aus dem Puffer erkennt den gesamten Code.
'autocomplete =' one-time-code'', auf Mobilgeräten - automatische SMS-Extraktion.
Backup-Eingabe ohne Split-Felder (ein Feld) - für Screenreader.

html
<div class="otp" role="group" aria-label="Код из SMS">
<input inputmode="numeric" maxlength="1">
<input inputmode="numeric" maxlength="1">
<!-- … -->
</div>

11) Masken und a11y

Das Label ist Pflicht ('<label for>'), der Platzhalter ist ein Beispiel, kein Ersatz.
Erklären Sie die Regel in der Nähe: helper text mit einem Beispiel („Format: + CC XXX XXX-XX-XX-XX“).
Verknüpfen Sie Fehler über 'aria-describedby', kritische Fehler über 'role =' alert'.
Der Kontrast von Text und Konturen ≥ AA,': focus-visible' ist nicht zu verbergen.

12) Privatsphäre und Sicherheit

Sensible Felder: nicht protokollieren, nicht in RUM schreiben, nicht in Entwürfen speichern (PAN, CVC, Pass).
Masken und Formatierungen dürfen die Gültigkeit des Accounts nicht offenlegen („Wenn E-Mail registriert ist...“ neutrale Formulierung).
Idempotenz und Retry für kritische Submiten (Zahlung/Rate).

13) Formverhalten und Leistung

Debunce der asynchronen Prüfungen (250-400 ms), sichtbare Anzeige „Prüfen“....
Blockieren Sie nicht den gesamten Bildschirm für ein einzelnes Feld; lokaler Spinner/Skelett.
Batchet DOM-Änderungen; animieren Sie nur 'transform/opacity'.
Auf Mobilgeräten - Vermeiden Sie „Sprünge“, wenn eine Tastatur erscheint (Safe-Area, Viewport Meta).

14) Code-Snippets

js function formatPhoneVisible(value) {
const d = value. replace(/\D/g,''). slice(0,15);
if (!d) return '';
if (d. startsWith('7')          d. startsWith('8')) {
return d. replace(/^([78])? (\d{3})(\d{3})(\d{2})(\d{2})./, '+7 ($2) $3-$4-$5');
}
// generic E.164 grouping: +CC XXX XXX XX XX return d. replace(/^(\d{1,3})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})./, (m,c1,c2,c3,c4,c5)=>
`+${c1}${c2?` ${c2}`:''}${c3?` ${c3}`:''}${c4?` ${c4}`:''}${c5?` ${c5}`:''}`.trim());
}

const input = document. querySelector('#phone');
input. addEventListener('input', e => {
const raw = e. target. value;
const pos = e. target. selectionStart;
const digitsBefore = raw. slice(0,pos). replace(/\D/g,''). length;
const cleaned = raw. replace(/[^\d+]/g,'');
const visible = formatPhoneVisible(cleaned);
e. target. value = visible;
// restore caret by counting digits let p = 0, count = 0;
while (p < e. target. value. length && count < digitsBefore) { if (/\d/.test(e. target. value[p])) count++; p++; }
e. target. setSelectionRange(p, p);
});

js const amount = document. getElementById('amount');
let cents = null;

amount. addEventListener('focus', () => {
if (cents!=null) amount. value = String(cents/100). replace('.', ',');
});
amount. addEventListener('blur', () => {
const v = parseMoney(amount. value) ;//from section 6 if (v = = null) return; cents = v;
amount. value = formatMoney(cents, 'ru-RU', 'RUB');
});

js const iban = document. getElementById('iban');
iban. addEventListener('input', () => iban. value = iban. value. toUpperCase());
iban. addEventListener('blur', () => {
const raw = normalizeIBAN(iban. value);
iban. dataset. raw = raw ;//for iban submission. value = raw. replace(/(.{4})/g,'$1 '). trim () ;//view only
});

15) Design-System-Token (Beispiel)

json
{
"input": {
"radius": 10,
"height": { "sm": 36, "md": 40, "lg": 48 },
"gap": 8,
"icon": 16
},
"mask": {
"debounceMs": 300,
"otpLength": 6,
"moneyPrecision": 2,
"phoneMaxDigits": 15
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

css
.input { height:40px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }
.otp input { width:40px; text-align:center; }

16) Besonderheiten von iGaming

Zahlungen/Schlussfolgerungen: PAN/IBAN/amount mit weichen Masken; strenge Idempotenz und das Fehlen von Protokollen empfindlicher Felder; Hinweise zu Provisionen und Fristen.
KYC: Masken für Datumsangaben, Passnummern (ohne „harte“ Filterung - Berücksichtigung verschiedener Formate), Dateigröße/-typ, Vorschau.
Limits und verantwortungsvolles Spielen: nachvollziehbare Beträge/Zeiträume (Tage/Wochen/Monate), Helfer daneben, AAA-Kontrast.
Wetten: schnelle Eingabe des Betrags (Preset-Tasten + Feld), im Fokus die „rohe“ Zahl, mit dem Blure-Format nach Ort; nicht zulassen „, „...../Doppeltrennzeichen.

17) Anti-Muster

Harte Masken, die gültige Zeichen/Einfügungen verbieten.
Springendes Caret im Auto-Format; fehlende Auswahl/undo.
Platzhalter statt Label.
Auto-Hinzufügen von Währung innerhalb des Wertes (bricht Copypast).
Fehler „für jedes Symbol“ ohne Debunce.
Lokal abhängige Formate im Speicher (ISO/Zahlen speichern).
PAN/Passnummern protokollieren und „zu ehrliche“ Ablehnungsgründe aufzeigen.

18) Metriken und Experimente

Fehlerrate nach Feldern (vor/nach Maske).
Time-to-Complete Formulare und wiederholte Einreichungen.
Anteil der fehlgeschlagenen Einsätze (Copypast) und „Pullbacks“ (Undo).
CTR der Hinweise/Beispiele, Anteil der Autovervollständigungen.
Abandon Rate im Zahlungsschritt/CUS.

19) QS-Checkliste

Eingabe und Caret

• Das Einfügen aus dem Puffer bricht nicht, Leerzeichen/Bindestriche werden korrekt gelöscht.
• Caret bleibt nach dem Autoformat vorhersehbar.

Ort und Format

• Die Beträge sind zulässig ", "/".; Speicherung in minor units.
• Die Daten werden pariert und validiert; Speicherung in ISO.

A11y

• Labels und 'aria-describedby' sind verbunden; 'role =' alert 'für kritische.
• Kontrast und Fokusringe entsprechen AA.

Sicherheit

• Sensible Felder werden nicht protokolliert/zwischengespeichert.
• Idempotenz und Retry in kritischen Schritten.

UX

• Placeholder ist ein Beispiel, kein Label; helper in der Nähe.
• Masken verhindern nicht das Drucken auf dem Handy; korrekte Tastaturen („inputmode“).

20) Dokumentation im Konstruktionssystem

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Masken-Token (Längen/Muster), Caret/Paste-Regeln, Zahlen/Datumslokalisierung.
Hydes nach Privatsphäre (was nicht protokolliert werden kann), nach Verfügbarkeit und nach Auto-Format vs blur.
„Do/Don't“ mit realen Beispielen und Vorher/Nachher-Metriken.

Kurze Zusammenfassung

Masken und Formulare sind gut, wenn sie die Eingabe beschleunigen, die Daten sauber halten und nicht stören. Formatieren Sie sorgfältig, normalisieren Sie am Eingang, speichern Sie in stabilen Ansichten, berücksichtigen Sie Locals und Verfügbarkeit. Dann werden die Formulare schnell und verständlich - vor allem in sensiblen Zahlungs-, KYC- und Wettszenarien.