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

Posted 2023-04-13

【中文标题】在 React 中禁用 `<input type=number>` 的滚动

【英文标题】：Disable scrolling on `<input type=number>` in React

【发布时间】：2020-11-23 05:25:49

【问题描述】：

之前有人问过这个问题，但提供的解决方案仅适用于 jQuery，因为我在 ReactJs 中遇到了同样的问题。

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

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

【问题讨论】：

你试过为那个字段做 e.preventDefault() 吗？

是的，我已经尝试过了，甚至我尝试在 public/index.html 中编写代码来删除 javascript 中的鼠标滚轮事件（反应之外），但它没有用。可能是我做错了什么

@FaisalJanjua 你有沙箱吗？

@Asutosh 很遗憾没有

检查这个，它是纯JS和HTML codepen.io/ahastudio/pen/eVovMv

【参考方案1】：

最简单的答案：

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

e 是 event 的缩写。

这也有效：

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

其中任何一个都可以在功能或类组件中使用。

【参考方案2】：

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

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

【讨论】：

嗨@Zedd，你使用的是同一个onWheel函数吗？

【参考方案3】：

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

您可以使用<input type="tel" pattern="[0-9]*" />，我不记得看到任何卷轴，而且您还可以在移动设备上获得数字键盘。

【讨论】：

这是迄今为止最简单的答案。

我可以在这个字段中输入字母，

【参考方案4】：

我使用一个包装input 元素并为"wheel" 添加事件侦听器并防止默认行为的功能组件解决了这个问题。我发现这比使用 blur() 更可取，因为它可能会有不良的用户体验。

// Simply a wrapper for <input type="number"/> that disables scrolling to increment

import  useEffect, useRef  from "react";

export const NumberInput = (props) => 
  const quantityInputRef = useRef(null);

  useEffect(() => 
    const ignoreScroll = (e) => 
      e.preventDefault();
    ;
    quantityInputRef.current && quantityInputRef.current.addEventListener("wheel", ignoreScroll);
  , [quantityInputRef]);

  return <input ref=quantityInputRef type="number" ...props />;
;

在生产中，我实际上使用此组件来禁用 Material-ui 中 <TextField> 组件的滚动增量，而不是 <input>。我在示例中使用了本机输入，因为这就是问题所在。

【参考方案5】：

我不认为这是最好的解决方案如果你只想要一个数字键盘，因为有一个属性实际上可以让你设置你想要的任何键盘类型，例如inputMode="numeric"

改变全球事件不是好的做法，也不是模糊的领域。

【参考方案6】：

在 react 版本中你应该使用 ref.看看下面的例子：

import React,  Component, createRef  from "react";

class MyInput extends Component 
  constructor(props) 
    super(props);
    this.inputRef = createRef();
  

  onWheel = () => 
    this.inputRef.current.blur();
  ;

  render() 
    return (
      <div>
        My input number :
        <input type="number" ref=this.inputRef onWheel=this.onWheel />
      </div>
    );
  


export default MyInput;

codesandbox here

【讨论】：

感谢@Sephyre 提供上述代码，这工作正常，但由于 blur() 方法，它对用户不友好。当我滚动鼠标滚轮时，它会失去焦点，对于输入，我必须在输入字段中再次单击以添加一个数字。

任何其他只禁用鼠标滚轮的解决方案？

看这个小提琴，这个体验真的很好很流畅，jsfiddle.net/x6o7dzuv

将此添加到 onWheel 函数setTimeout(() => this.inputRef.current.focus(), 100);