反应：如何防止用户输入"e"，'+'和'-'输入类型= "number"

Question

我有一个输入，如果输入类型是"text"，我可以过滤任何字母。此外，我正在听一个onKeyUp事件来递增/递减输入值。

但这种方法有两个问题：

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

2. 当用户按下"向上箭头"按钮时，光标会前后"跳跃"(跳到输入的开头，然后跳回输入的末尾(。

当我试图为数字输入实现相同的逻辑时，当用户键入"；e"；。例如："12e"将被识别为"(空字符串(。这是可以接受的，但我希望用户能够通过选择范围并按下"0"键来删除他/她输入的任何值；删除"；按钮

下面是我创建的代码示例来演示这个问题：

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

更新：

根据马丁·沃尔伯格的回答，我们应该听听onKeyDown的活动。这里是过滤"；e"&quot-&quot；以及"+&"；。可能对面临同样问题的人有用。

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解释为有效数字的一部分。例如，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插入数字之间时，我添加了regex替换来处理