enfant terrible unter den HTML-Eingaben. Es gibt zahlreiche Beschwerden über diese Eingabe.

Probleme bei der Zahleneingabe

• Inkonsistenz. Verschiedene Browser gehen unterschiedlich damit um. In Chromium-basierten Browsern können Sie nur Zahlen eingeben. Sie können jedoch in Firefox und Safari jedes beliebige Symbol eingeben, allerdings wird dort ein Fehler-Popup angezeigt.

• Komplexität. Gültige Zahlen sind nicht nur Ziffern. Die Zahleneingabe ermöglicht negative (-100) und Gleitkommawerte (0,01) sowie wissenschaftliche Notation (-2,3e4). Das ist manchmal hilfreich, aber nicht immer.

• Unerwartetes Verhalten. Bei der Zahleneingabe wird der als ungültig erachtete Wert nicht gemeldet. Stattdessen wird eine leere Zeichenfolge gemeldet. Außerdem gelten Werte, die höherwertige Ziffern als das Schrittattribut haben, als ungültig.

Glücklicherweise können wir mit HTML die meisten dieser Probleme beheben. Erstellen wir also eine bessere Zahleneingabe. Hier ist die Liste der zu unterstützenden Grundfunktionen.

Numerische Eingabefunktionen

• Überprüft Benutzereingaben in allen modernen Browsern konsistent.

• Legt den Dezimal-Eingabemodus für Bildschirmtastaturen fest.

• Kann erhöht und verringert werden, wenn die Auf- oder Ab-Taste gedrückt wird.

Eingabeattribute festlegen

Als Erstes wenden wir native Eingabeattribute an, damit es wie gewünscht funktioniert. Ich werde das Musterattribut verwenden, um die Texteingabe des Benutzers zu bereinigen.

Verfügbare Muster

• (?:0|[1-9]\d*) – Nur Ziffern zulassen, 1234567890

• [ \-]?(?:0|[1-9]\d*) – Positive und negative ganze Zahlen zulassen, z. B. 1, -2, 3

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )? - Fließkommazahlen zulassen, z.B. 1,001, -123,9

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )?(?:[eE][ \-]?\d )? - Wissenschaftliche Notation zulassen, z.B. -1.314e12

So sollte unser HTML jetzt aussehen.

inputMode="decimal" legt die richtige Tastatur für Touch-Geräte fest.

autoComplete="off" wird benötigt, um die störende automatische Vervollständigung des Browsers zu deaktivieren. Normalerweise wird eine solche Funktionalität für namensähnliche Eingaben benötigt.

React-Komponentenschnittstelle

// List of available numeric modes
enum Modes {
    natural = 'natural',
    integer = 'integer',
    floating = 'floating',
    scientific = 'scientific',
}

type Value = string;

export type Props = {
    /** Set controlled value */
    value?: Value;
    /** Provide a callback to capture changes */
    onChange?: (value?: Value) => void;
    /**
     * Define a number to increase or decrease input value
     * when user clicks arrow keys
     */
    step?: number;
    /** Set a maximum value available for arrow stepping */
    max?: number;
    /** Set a minimum value available for arrow stepping */
    min?: number;
    /** Select a mode of numeric input */
    mode?: keyof typeof Modes;
};

export const InputNumeric: FC = ({
    value,
    step = 1,
    max = Infinity,
    min = -Infinity,
    onChange = () => {},
    mode = Modes.scientific,
}) => {
    //...
}

Jetzt müssen wir das Musterattribut entsprechend der Moduseinstellung verwalten.

const patternMapping = {
    [Modes.natural]: '(?:0|[1-9]\\d*)',
    [Modes.integer]: '[ \\-]?(?:0|[1-9]\\d*)',
    [Modes.floating]: '[ \\-]?(?:0|[1-9]\\d*)(?:\\.\\d )?',
    [Modes.scientific]: '[ \\-]?(?:0|[1-9]\\d*)(?:\\.\\d )?(?:[eE][ \\-]?\\d )?',
};

const pattern = patternMapping[mode];

Behandeln Sie Tastenanschläge

Hier erfahren Sie, wie Sie mit Pfeiltastendrücken umgehen.

const handleKeyDown = useCallback(
    (event: KeyboardEvent) => {
        const inputValue = (event.target as HTMLInputElement).value;
        // handle increment
        if (event.key === 'ArrowUp') {
            // empty input value has to be normalized to zero
            const nextValue = Number(inputValue || 0)   step;
            if (nextValue = min) {
                onChange(nextValue.toString());
            }
        }
    },
    [max, min, onChange, step]
);

Validierung der Benutzereingaben

Wir werden den Benutzer über die Farbe des Eingaberahmens und den Optionshinweis unter der Eingabe über erwartete Verstöße gegen das Zahlenformat informieren.

Wir werden Tailwind CSS verwenden, um dieses Design und die Fehlerberichtsfunktion zu erstellen.

Der Name der Peer-Klasse ist erforderlich, um einen CSS-Selektor für eine Eingabefehlermeldung unten zu erstellen. invalid:border-red-600 Klassenname malt den Rand rot, wenn die Eingabe ungültig ist.

invisible“ legt standardmäßig „visibility:hidden“ für die Hinweisnachricht fest. Die peer-[:invalid]:visible-Klasse entpackt sich in den folgenden Selektor .peer:invalid ~ .peer-\[\:invalid\]\:visible, wodurch der Hinweis sichtbar wird, wenn ihm der input.peer im :invalid-Zustand vorangestellt wird.

export const InputNumeric: FC = () => {
    const id = useId();
    return (
        

Hier ist der vollständige numerische Eingabecode:

Viel Spaß beim Codieren!