这个问题以前被问过,但提供的解决方案只是针对jQuery,因为我在ReactJs中面临同样的问题。是否可以禁用滚轮,以更改输入数字字段中的数字?我使用CSS删除了微调箭头,但鼠标滚轮仍然工作和混乱的功能。我想要输入类型number,因为它提供了移动的/触摸设备上的数字键盘。
jQuery
number
htzpubme1#
最简单的答案:
<input type="number" onWheel={(e) => e.target.blur()} />
e是event的缩写。这也适用于:
e
event
<input type="number" onWheel={() => document.activeElement.blur()} />
这两个组件都可以用在functional或class组件中。
eqoofvh92#
您可以模糊onWheel处理程序上的字段。就像这样
<input type='number' onWheel={ event => event.currentTarget.blur() } />
oewdyzsn3#
我也遇到了同样的问题,除了我只在桌面版本上工作。如其他答案中所建议的那样模糊输入上的焦点可以停止滚动。但这不是我想要的。我仍然希望用户能够用键盘改变输入。因此,为了在React中禁用<input type=number>上的滚动,我添加了一个onFocus属性,如下所示:
<input type=number>
onFocus
<input //...some input properties...// type="number" onFocus={(e) => e.target.addEventListener("wheel", function (e) { e.preventDefault() }, { passive: false })} />
对我来说效果很好。我希望它能帮助其他人。
mqkwyuun4#
我使用一个功能组件解决了这个问题,该组件 Package 了input元素,并为"wheel"添加了一个事件侦听器,防止了默认行为。我发现这比使用blur()更好,blur()可能有不理想的用户体验。
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而不是<input>禁用<TextField>组件的滚动增量。我在例子中使用了本机输入,因为这就是问题所问的。
<input>
<TextField>
bybem2ql5#
我不认为这是最好的解决方案如果你只想要一个数字键盘,因为有一个属性,实际上可以让你设置任何你想要的键盘类型,例如。inputMode="numeric"改变全球事件不是好的做法,也不是模糊的领域。
inputMode="numeric"
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
wkftcu5l7#
docsexample in react
onWheel={e=> e.preventDefault()}
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> ); }
zzoitvuj8#
这也可以使用CSS来实现。
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
8条答案
按热度按时间htzpubme1#
最简单的答案:
e
是event
的缩写。这也适用于:
这两个组件都可以用在functional或class组件中。
eqoofvh92#
您可以模糊onWheel处理程序上的字段。就像这样
oewdyzsn3#
我也遇到了同样的问题,除了我只在桌面版本上工作。如其他答案中所建议的那样模糊输入上的焦点可以停止滚动。但这不是我想要的。我仍然希望用户能够用键盘改变输入。
因此,为了在React中禁用
<input type=number>
上的滚动,我添加了一个onFocus
属性,如下所示:对我来说效果很好。我希望它能帮助其他人。
mqkwyuun4#
我使用一个功能组件解决了这个问题,该组件 Package 了
input
元素,并为"wheel"
添加了一个事件侦听器,防止了默认行为。我发现这比使用blur()
更好,blur()
可能有不理想的用户体验。在生产环境中,我实际上使用该组件从material-ui而不是
<input>
禁用<TextField>
组件的滚动增量。我在例子中使用了本机输入,因为这就是问题所问的。bybem2ql5#
我不认为这是最好的解决方案如果你只想要一个数字键盘,因为有一个属性,实际上可以让你设置任何你想要的键盘类型,例如。
inputMode="numeric"
改变全球事件不是好的做法,也不是模糊的领域。
daupos2t6#
在react版本中,您应该使用ref。看看下面的例子:
codesandbox here
wkftcu5l7#
防止onWheel事件
docs
example in react
zzoitvuj8#
这也可以使用CSS来实现。