在React中禁用`<input type=number>`上的滚动

Question

这个问题之前已经问过了，但提供的解决方案只适用于jQuery，因为我在ReactJs中也面临着同样的问题。

是否可以禁用滚轮更改输入数字字段中的数字？我使用CSS删除了微调器箭头，但鼠标滚轮仍在工作，并且功能混乱。

我希望输入类型为number，因为它在移动/触摸设备上提供了数字键盘。

Answer 1

最简单的答案：

<input type="number" onWheel={(e) => e.target.blur()} />

e是event的缩写。

这也是可行的：

<input type="number" onWheel={() => document.activeElement.blur()} />

这两种方法中的任何一种都可以在函数组件或类组件中使用。

Answer 2

​

<input type="tel" pattern="[0-9]*" />

​

你可以使用<input type="tel" pattern="[0-9]*" />，我不记得你看到过任何滚动条，你也可以在移动设备上使用数字键盘。

Answer 3

您可以在onWheel处理程序上模糊该字段。像这样的东西

<input type='number' onWheel={ event => event.currentTarget.blur() } />