React：如何防止用户在 input type="number" 时输入 'e'、'+' 和 '-'

Question

我有一个输入，如果输入类型是“文本”，我可以过滤任何字母。 另外，我正在收听onKeyUp 事件来增加/减少输入值。

但是这种方法有两个问题：

1. 文本输入不会在右侧显示向上/向下按钮。

2. 当用户按下“向上箭头”按钮时，光标会前后“跳跃”（到输入的开头，然后跳回到输入的结尾）。

当我尝试为数字输入实现相同的逻辑时，当用户键入“e”时，来自它的值是空的。 EG：'12e' 将被标识为“”（空字符串）。这是可以接受的，但我希望用户能够通过选择范围并按下“删除”按钮来删除他/她输入的任何值。

这是我为演示该问题而创建的代码示例：

https://codesandbox.io/s/peaceful-mcclintock-gd74y

更新：

根据 Martin Wahlberg 的回答，我们应该监听 onKeyDown 事件。 这是过滤“e”、“-”和“+”的工作版本。可能对遇到同样问题的人有用。

https://codesandbox.io/s/throbbing-fast-5u2qq

感谢您的帮助！

Answer 1

这应该可行：

const onNumberInputChange = useCallback(({ target: { value } }) => {
    if(!/\d*/.test(value)) return
    setFilteredValue(value);
    setUnfilteredValue(value);
  }, []);  const onNumerInputKeyDown = (event) => {
if(event.key === "e") event.preventDefault();

}

如果您更新您的数字输入以在 keyDown 上使用此功能，我们应该也可以阻止用户输入 e

const onNumerInputKeyDown = (event) => {
    if(event.key === "e") event.preventDefault();
  }

在这里，用户将能够完全删除他们的输入，并阻止用户使用 e。

Answer 2

在我看来，数字类型字段将e 解释为使用e notation 的有效数字的一部分。例如，1e3 与 1 x 10^3 或 1000 相同。它并没有将数字扩展为正常的以 10 为底的符​​号，但我猜当您以 e 结尾的数字时，它不是有效数字。

顺便说一句，输入+ 也与输入e 具有相同的效果。

您可以通过将您的 onNumberInputChange 函数更新为以下内容来解决此问题：

const onNumberInputChange = useCallback(({ target: { value } }) => {
  const updatedValue = (value === "") ? filteredValue.replace(/[^0-9]/g, '') : value;
  setFilteredValue(updatedValue);
  setUnfilteredValue(value);
}, [ filteredValue ]);

编辑：当e 插入数字之间时，我添加了正则表达式替换来处理