我如何在 React 中制作一個只允許數字或空值的文本框，這會觸發移動設備上的數字鍵盤？

Question

StackOverflow 上有很多這樣的問題，但沒有一個能在同一個解決方案中捕獲我的所有需求。 任何幫助表示贊賞。

問題

在我的 React 應用程序中，我需要一個具有以下特征的文本框：

1. 它只允許輸入數字 - 除了數字 0-9 之外，不允許輸入減號、小數位、字母或任何其他內容。
2. 它會自動調出 iOS 和 Android 上的數字鍵盤
3. 我可以進一步限制應該輸入的數字，例如只允許 4 位數字
4. 前導零會自動修剪，例如，如果用戶鍵入 02，它應該更正為 2
5. 它允許一個空的文本框，並且可以區分空值和 0 值

當前代碼

https://codepen.io/micahrl/pen/RwGeLmo

此代碼允許鍵入非數字，並且只會將值解釋為 NaN。 例如，用戶可以鍵入2f或asdf ，頁面將顯示You typed: NaN 。

此外，雖然頁面最初加載時帶有一個空文本框，但用戶無法鍵入內容然后將其刪除回空。 嘗試刪除輸入框中的所有文本會在框中放置一個0 。

最后，這段代碼不能可靠地修剪前導零，這給我帶來了特殊的問題，因為我想將數字限制為四位。 輸入01不會截斷前導零； 在某些瀏覽器上，鍵入01111將得到1111 ，這已經足夠了，而在其他瀏覽器上，鍵入01111將得到0111 ，這是一個問題。

我試過的

因為我在輸入元素上設置了type="number" ，所以如果文本框中添加了一個非數字， setNumWrapper中的event.target.value將是一個空字符串。 這意味着我無法區分真正的空字符串（用戶已刪除所有文本）和無效輸入（用戶鍵入了非數字，如asdf ）。

我可以在輸入元素上設置type="text" ，但我認為我需要將其設置為number才能在 iOS 和 Android 等移動操作系統上獲得數字鍵盤。

Answer 1

通過進一步的實驗，以及@Keith 在評論中的一些幫助，我幾乎解決了所有問題。

我在我的問題中分叉了 codepen，並在分叉中做了這些更改： https://codepen.io/micahrl/pen/GRjwqdO 。

檢查輸入有效性

@Keith 向我指出了validity.badInput ( https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput )。 有了這個，我可以區分空輸入（用戶鍵入內容然后將其刪除）和錯誤輸入（用戶嘗試添加非數字字符）。

這意味着我將其添加到setNumWrapper()的開頭：

    if (event.target.value === "") {
      if (event.target.validity.badInput) {
        // Set the text box and number to the old value - ignore the bad input
        inputRef.current.value = String(num);
        setNum(num);
      } else {
        // The data in the text box was deleted - set everything to empty
        inputRef.current.value = "";
        setNum(NaN);
      }
      return;
    }

我還必須使用useRef()創建一個inputRef ，並將其設置在<input>元素上。

這解決了#1 中的#5 大部分問題（但請參閱下面的剩余小問題）。

修剪前導零

為此，我所要做的就是使用inputRef在setNumWrapper()末尾的<input>元素中設置值：

inputRef.current.value = String(newNum);

<input>元素的值無論如何始終是一個字符串，並且將數字強制轉換為一個刪除前導零的字符串（如果有的話）。

遺留問題：如果文本框為空，則允許無效輸入

當文本框為空時，用戶可以在其中鍵入非數字字符，而setNumWrapper()甚至不會觸發。 如果將console.log()放在setNumWrapper()的頂部，如果用戶鍵入字母，它不會在日志中打印任何內容，但如果用戶鍵入數字，它會在日志中打印。

這意味着我不能使用setNumWrapper()來解決這個問題。

但是，它也相對較小。 在手機上，數字鍵盤出現，防止非數字輸入。 在桌面上，沒有什么可以阻止用戶使用鍵盤輸入字母，但對於我的應用程序，很明顯只允許使用數字，所以現在這已經足夠了。

不過，如果有辦法解決這個問題，我很想聽聽。