Kartennummer mit Live-Vorschau
Beim Tippen zeigt die Karte darüber die Nummer, gruppiert sie in Viererblöcken und erkennt die Marke.
Einstellungen
Code
<div class="uv-icd"><div class="cd" aria-hidden="true"><span class="ch"></span><span class="br">Karte</span><span class="nb">•••• •••• •••• ••••</span><span class="nm">Lucía Martín</span></div><label for="uv-icd-in">Kartennummer</label><div class="fd"><input id="uv-icd-in" inputmode="numeric" autocomplete="cc-number" placeholder="1234 5678 9012 3456" maxlength="19"><span class="tg">Karte</span></div></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 Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Zahlungsformulare wirken sicherer, wenn man das Getippte auf etwas sieht, das wie die eigene Karte aussieht. Dieses Feld gruppiert die Nummer in Viererblöcken, spiegelt sie auf einer glänzenden Kartenvorschau mit Chip und Namen und erkennt Visa, Mastercard oder Amex an den ersten Ziffern, inklusive passender Farben und Marken-Tag.
Im Fokus neigt sich die Karte leicht und ein Lichtreflex wandert darüber. Das Feld öffnet am Handy die Zifferntastatur und nutzt autocomplete cc-number, Passwortmanager können es also ausfüllen.