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" 需要停用煩人的瀏覽器自動完成功能，通常類似名稱的輸入需要此類功能。

反應組件介面

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

現在我們需要根據模式設定來管理pattern屬性。

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 選擇器所必需的。 invalid:border-red-600 類別名稱在輸入無效時以紅色繪製邊框。

invisible 類別預設設定提示訊息的visibility:hidden。 peer-[:invalid]:visible 類別解包到以下選擇器 .peer:invalid ~ .peer-\[\:invalid\]\:visible ，這使得提示在 input.peer 前面處於 :invalid 狀態時可見。

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

這是完整的數位輸入代碼：

編碼愉快！