enfant terrível de entradas HTML. As reclamações sobre esta contribuição são inúmeras.

Problemas de entrada de números

• Inconsistência. Navegadores diferentes lidam com eles de maneira diferente. Você pode inserir apenas números em navegadores baseados em Chromium. Mas você pode inserir qualquer símbolo no Firefox e Safari, embora eles mostrem um pop-up de erro.

• Complexidade. Os números válidos não são apenas dígitos. A entrada de números permite valores negativos (-100) e ponto flutuante (0,01), bem como notação científica (-2.3e4). O que é útil às vezes, mas não sempre.

• Comportamento inesperado. A entrada numérica não informará o valor que considera inválido. Em vez disso, uma string em branco é relatada. Além disso, valores que possuem dígitos mais significativos que o atributo step são considerados inválidos.

Felizmente, o HTML nos permite corrigir a maioria desses problemas. Então, vamos criar uma entrada numérica melhor. Aqui está a lista de recursos básicos para suporte.

Recursos de entrada numérica

• Valida a entrada do usuário em todos os navegadores modernos de forma consistente.

• Define o modo de entrada decimal para teclados na tela.

• Pode aumentar e diminuir quando as teclas para cima ou para baixo são pressionadas.

Configurando atributos de entrada

Primeira coisa, aplicamos atributos de entrada nativos para fazê-lo funcionar como desejamos. Vou usar o atributo padrão para limpar a entrada de texto do usuário.

Padrões disponíveis

• (?:0|[1-9]\d*) - Permitir apenas dígitos, 1234567890

• [ \-]?(?:0|[1-9]\d*) - Permite números inteiros positivos e negativos, por exemplo. 1, -2, 3

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )? - Permitir números inteiros flutuantes, por ex. 1.001, -123,9

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )?(?:[eE][ \-]?\d )? - Permitir notação científica, por ex. -1.314e12

Esta é a aparência do nosso HTML agora.

inputMode="decimal" define o teclado adequado para dispositivos de toque.

autoComplete="off" é necessário para desativar o irritante preenchimento automático do navegador; geralmente, essa funcionalidade é necessária para entradas semelhantes a nomes.

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

Agora precisamos gerenciar o atributo padrão de acordo com a configuração do modo.

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

Lidar com as teclas digitadas

Veja como lidar com o pressionamento de teclas de seta.

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

Validação de entrada do usuário

Informaremos o usuário sobre violações esperadas de formato de número por meio da cor da borda de entrada e da dica de opção abaixo da entrada.

Usaremos Tailwind CSS para criar esse design e funcionalidade de relatório de erros.

o nome da classe peer é necessário para criar um seletor CSS para uma mensagem de erro de entrada abaixo. invalid:border-red-600 o nome da classe pinta a borda com a cor vermelha quando a entrada é inválida.

invisível define a visibilidade: oculta para a mensagem de dica por padrão. peer-[:invalid]:visible classe desembrulha para o seguinte seletor .peer:invalid ~ .peer-\[\:invalid\]\:visible que torna a dica visível quando é precedida pelo input.peer em :invalid state.

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

Aqui está o código de entrada numérico completo:

Boa codificação!