ужасным среди входных HTML-кодов. Жалоб на этот вклад множество.

Проблемы с вводом чисел

• Несоответствие. Разные браузеры обрабатывают их по-разному. В браузерах на базе Chromium можно вводить только цифры. Но вы можете ввести любой символ в Firefox и Safari, хотя они будут показывать всплывающее окно с ошибкой.

• Сложность. Допустимые числа — это не просто цифры. Ввод чисел позволяет использовать значения отрицательные (-100) и с плавающей запятой (0,01), а также научную запись (-2.3e4). Что иногда полезно, но не всегда.

• Неожиданное поведение. Ввод числа не сообщит значение, которое он считает недействительным. Вместо этого сообщается пустая строка. Кроме того, значения, которые имеют более значащие цифры, чем атрибут шага, считаются недействительными.

К счастью, HTML позволяет решить большинство этих проблем. Итак, давайте создадим более удобный ввод чисел. Вот список основных функций, которые поддерживаются.

Функции числового ввода

• Последовательно проверяет вводимые пользователем данные во всех современных браузерах.

• Устанавливает десятичный режим ввода для экранных клавиатур.

• Может увеличиваться и уменьшаться при нажатии клавиш вверх или вниз.

Установка входных атрибутов

Прежде всего, мы применяем собственные входные атрибуты, чтобы он работал так, как мы хотим. Я собираюсь использовать атрибут шаблона для очистки ввода текста пользователем.

Доступные шаблоны

• (?:0|[1-9]\d*) — разрешать только цифры, 1234567890

• [ \-]?(?:0|[1-9]\d*) — разрешить положительные и отрицательные целые числа, например 1, -2, 3

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )? - Разрешить плавающие целые числа, например. 1,001, -123,9

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )?(?:[eE][ \-]?\d )? - Разрешить научные обозначения, например. -1.314e12

Вот как сейчас должен выглядеть наш HTML.

inputMode="decimal" устанавливает правильную клавиатуру для сенсорных устройств.

autoComplete="off" необходим для отключения раздражающего автозаполнения браузера, обычно такая функция необходима для ввода имен.

Интерфейс компонента React

// 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,
}) => {
    //...
}

Теперь нам нужно управлять атрибутом шаблона в соответствии с настройкой режима.

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];

Обрабатывать нажатия клавиш

Вот как обрабатывать нажатия клавиш со стрелками.

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]
);

Проверка ввода пользователя

Мы собираемся информировать пользователя об ожидаемых нарушениях числового формата с помощью цвета границы ввода и подсказки под полем ввода.

Мы собираемся использовать Tailwind CSS для создания этого дизайна и функции отчетности об ошибках.

имя однорангового класса необходимо для создания селектора CSS для сообщения об ошибке ввода ниже. недопустимо: имя класса border-red-600 окрашивает границу красным цветом, если ввод недействителен.

класс invisible устанавливает видимость:скрыто для сообщения подсказки по умолчанию. Класс Peer-[:invalid]:visible разворачивается в следующий селектор .peer:invalid ~ .peer-\[\:invalid\]\:visible, который делает подсказку видимой, если ей предшествует input.peer в состоянии :invalid.

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

Вот полный числовой код ввода:

Удачного программирования!