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

uqdfh47h  于 2023-05-21  发布在  Java
关注(0)|答案(8)|浏览(210)

这个问题以前被问过,但提供的解决方案只是针对jQuery,因为我在ReactJs中面临同样的问题。
是否可以禁用滚轮,以更改输入数字字段中的数字?我使用CSS删除了微调箭头,但鼠标滚轮仍然工作和混乱的功能。
我想要输入类型number,因为它提供了移动的/触摸设备上的数字键盘。

htzpubme

htzpubme1#

最简单的答案:

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

eevent的缩写。
这也适用于:

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

这两个组件都可以用在functionalclass组件中。

eqoofvh9

eqoofvh92#

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

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

oewdyzsn3#

我也遇到了同样的问题,除了我只在桌面版本上工作。如其他答案中所建议的那样模糊输入上的焦点可以停止滚动。但这不是我想要的。我仍然希望用户能够用键盘改变输入。
因此,为了在React中禁用<input type=number>上的滚动,我添加了一个onFocus属性,如下所示:

<input
    //...some input properties...//
    type="number"
    onFocus={(e) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })}
/>

对我来说效果很好。我希望它能帮助其他人。

mqkwyuun

mqkwyuun4#

我使用一个功能组件解决了这个问题,该组件 Package 了input元素,并为"wheel"添加了一个事件侦听器,防止了默认行为。我发现这比使用blur()更好,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而不是<input>禁用<TextField>组件的滚动增量。我在例子中使用了本机输入,因为这就是问题所问的。

bybem2ql

bybem2ql5#

我不认为这是最好的解决方案如果你只想要一个数字键盘,因为有一个属性,实际上可以让你设置任何你想要的键盘类型,例如。inputMode="numeric"
改变全球事件不是好的做法,也不是模糊的领域。

daupos2t

daupos2t6#

在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

wkftcu5l

wkftcu5l7#

防止onWheel事件

docs
example in react

onWheel={e=> e.preventDefault()}
  • 在React代码中
export default function App() {
 return (
  <div className="App">
   <form>
    <input
     type="number"
     placeholder="type num"
     // prevent scroll on number input
     onWheel={(event) => {
      event.preventDefault();
     }}
   />
   <button type="submit">send</button>
  </form>
 </div>
);
}
zzoitvuj

zzoitvuj8#

这也可以使用CSS来实现。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button
{ 
  -webkit-appearance: none; 
  margin: 0; 
}

相关问题