Javascript 反应：如何防止用户进入'；e''+'；和'-'；对于输入类型="；“数字”；

我有一个输入，可以过滤任何字母，如果输入类型是“文本”。 另外，我正在听一个

onKeyUp

事件来增加/减少输入值

但这种方法有两个问题：

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

当用户按下“ArrowUp”按钮时，光标来回“跳跃”（到输入的开头，然后跳回到输入的结尾）

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

下面是我创建的代码示例，用于演示该问题：

更新：

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

谢谢你的帮助

这应该有效：

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

}

如果你更新你的数字输入，在按键下使用这个功能，我们应该能够阻止用户输入e

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

---

在这里，用户可以完全删除他们的输入，并且禁止用户使用e。

在我看来，数字类型字段使用将

e

解释为有效数字的一部分。例如，

1e3

与

1x10^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 ]);

---

编辑：我添加了regex replace来处理在数字之间插入

e

的情况。如果用户选择整个输入范围并按“删除”，则不会更新输入。按“删除”是什么意思？我看不出您添加了删除按钮。在您的第一个版本的答案中，条件是if（！value）return。在这种情况下，用户将无法选择整个范围并将其删除。我的意思是，如果值为341，用户选择全部3位数字并按键盘上的“删除”，则不会有任何更改。在第二个版本的答案中，条件是如果（！/\d*/.test（value））返回，这意味着用户每次按数字输入上的“e”按钮时，都会销毁该值。因为出于某种原因，“e”被标识为一个空字符串，等于删除了整个值。我更新了我的答案。我想这应该是你现在的解决方案。在这种情况下，用户将无法删除整个值（选择整个值+按delete按钮），它将不会更改它，因为在这种情况下，e等于一个空字符串。果然-我本以为我已经测试了该情况，但忽略了它。。。您正在开发的产品的具体要求是能够使用向上/向下的递增/递减值，并在输入中显示向上/向下箭头按钮吗？不用担心！谢谢你的帮助！：）