enfant terrible de las entradas HTML. Las quejas sobre este insumo son numerosas.

Problemas de entrada de números

• Inconsecuencia. Cada navegador los maneja de manera diferente. Solo puede ingresar números en navegadores basados ​​en Chromium. Pero puedes ingresar cualquier símbolo en Firefox y Safari, aunque mostrarán una ventana emergente de error.

• Complejidad. Los números válidos no son sólo dígitos. La entrada de números permite valores negativos (-100) y punto flotante (0,01), así como notación científica (-2.3e4). Lo cual es útil a veces, pero no siempre.

• Comportamiento inesperado. La entrada de números no informará el valor que considera no válido. En su lugar, se informa una cadena en blanco. Además, los valores que tienen dígitos más significativos que el atributo de paso se consideran no válidos.

Afortunadamente, HTML nos permite solucionar la mayoría de estos problemas. Entonces, creemos una mejor entrada numérica. Aquí está la lista de funciones básicas compatibles.

Funciones de entrada numérica

• Valida la entrada del usuario en todos los navegadores modernos de manera consistente.

• Establece el modo de entrada decimal para teclados en pantalla.

• Puede aumentar y disminuir cuando se presionan las teclas arriba o abajo.

Configuración de atributos de entrada

En primer lugar, aplicamos atributos de entrada nativos para que funcione como queremos. Voy a usar el atributo de patrón para desinfectar la entrada de texto del usuario.

Patrones disponibles

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

• [ \-]?(?:0|[1-9]\d*) - Permitir números enteros positivos y negativos, p.e. 1, -2, 3

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )? - Permitir números enteros flotantes, p.e. 1.001, -123.9

• [ \-]?(?:0|[1-9]\d*)(?:\.\d )?(?:[eE][ \-]?\d )? - Permitir notación científica, p.e. -1.314e12

Así es como debería verse nuestro HTML ahora.

inputMode="decimal" configura el teclado adecuado para dispositivos táctiles.

autoComplete="off" es necesario para deshabilitar el molesto autocompletado del navegador; normalmente dicha funcionalidad es necesaria para entradas similares a nombres.

Reaccionar interfaz del componente

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

Ahora necesitamos administrar el atributo del patrón según la configuración del 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];

Manejar las pulsaciones de teclas

A continuación se explica cómo manejar las pulsaciones de las teclas de flecha.

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

Validación de entrada del usuario

Vamos a informar al usuario sobre las infracciones esperadas del formato de número mediante el color del borde de entrada y la sugerencia de opción debajo de la entrada.

Vamos a utilizar Tailwind CSS para crear este diseño y funcionalidad de informe de errores.

el nombre de la clase de pares es necesario para crear un selector de CSS para un mensaje de error de entrada a continuación. invalid:border-red-600 nombre de clase pinta el borde con color rojo cuando la entrada no es válida.

la clase invisible establece visibilidad: oculta para el mensaje de sugerencia de forma predeterminada. peer-[:invalid]:la clase visible se desenvuelve en el siguiente selector .peer:invalid ~ .peer-\[\:invalid\]\:visible que hace que la pista sea visible cuando está precedida por input.peer en :invalid state.

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

Aquí está el código de entrada numérico completo:

¡Feliz codificación!