React：如何防止用户输入 'e'、'+' 和 '-' 输入类型="number"

Question

我有一个输入，如果输入类型是'text'，我可以过滤任何字母。此外，我正在收听一个 onKeyUp 事件到 increment/decrement 输入值。

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

文本输入不显示右侧的 up/down 按钮。
当用户按下'ArrowUp'按钮时，光标'jumps'来回（到输入的开头然后跳回到输入的结尾）。

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

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

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 的情况

React：如何防止用户输入 'e'、'+' 和 '-' 输入类型="number"

React: How to prevent user from entering 'e', '+' and '-' for input type="number"

javascript

validation

numbers

input

reactjs