끔찍한 요소였습니다. 이 입력에 대한 불만 사항이 많습니다.

숫자 입력 문제

• 불일치. 브라우저마다 이를 다르게 처리합니다. 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"는 성가신 브라우저 자동 완성을 비활성화하는 데 필요합니다. 일반적으로 이러한 기능은 이름과 같은 입력에 필요합니다.

반응 구성 요소 인터페이스

// 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 선택기를 생성하려면 피어 클래스 이름이 필요합니다. valid:border-red-600 클래스 이름은 입력이 유효하지 않은 경우 테두리를 빨간색으로 칠합니다.

invisible 클래스는 기본적으로 힌트 메시지에 대해 visible:hidden을 설정합니다. peer-[:invalid]:visible 클래스는 다음 선택기 .peer:invalid ~ .peer-\[\:invalid\]\:visible로 래핑되어 :invalid 상태에서 input.peer가 앞에 올 때 힌트를 표시합니다.

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

전체 숫자 입력 코드는 다음과 같습니다.

즐거운 코딩하세요!