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

Question

是否可以禁用滚轮更改输入数字字段中的数字？我已经搞乱了特定于webkit的CSS来删除微调器,但我想完全摆脱这种行为.我喜欢使用,type=number因为它在iOS上带来了一个漂亮的键盘.

Answer 1

防止鼠标事件在输入数字元素上的默认行为,如其他人建议的那样(调用"blur()"通常不是首选的方法,因为那不是,用户想要的).

但.我会避免一直在所有输入数字元素上监听鼠标滚轮事件,只有当元素处于焦点时才会这样做(当问题存在时).否则,当鼠标指针位于输入数字元素上方时,用户无法滚动页面.

jQuery的解决方案:

// disable mousewheel on a input number field when in focus
// (to prevent Cromium browsers change the value when scrolling)
$('form').on('focus', 'input[type=number]', function (e) {
  $(this).on('wheel.disableScroll', function (e) {
    e.preventDefault()
  })
})
$('form').on('blur', 'input[type=number]', function (e) {
  $(this).off('wheel.disableScroll')
})

(将焦点事件委托给周围的表单元素 - 以避免许多事件监听器,这对性能有害.)

Answer 2

$(document).on("wheel", "input[type=number]", function (e) {
    $(this).blur();
});

Answer 3

ReactJS解决方案

对于那些需要 React 解决方案的人，这里有一个onWheel输入处理程序type="number"，用于防止数字更改并防止用户尝试在输入上滚动时页面滚动。最后，它将重新关注输入，以便用户可以继续按预期进行编辑：

const numberInputOnWheelPreventChange = (e) => {
  // Prevent the input value change
  e.target.blur()

  // Prevent the page/container scrolling
  e.stopPropagation()

  // Refocus immediately, on the next tick (after the current function is done)
  setTimeout(() => {
    e.target.focus()
  }, 0)
}

return <input type="number" onWheel={numberInputOnWheelPreventChange}/>

Answer 4

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(event){ this.blur() })

http://jsfiddle.net/bQbDm/2/

对于jQuery示例和跨浏览器解决方案,请参阅相关问题:

数字输入滚动的HTML5事件监听器 - 仅限Chrome

Answer 5

@Semyon Perepelitsa

有一个更好的解决方案.模糊会从输入中移除焦点,这是您不想要的副作用.你应该使用evt.preventDefault.这可以防止用户滚动时输入的默认行为.这是代码:

input = document.getElementById("the_number_input")
input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })

Answer 6

一个事件监听器来统治它们

这类似于@Semyon Perepelitsa在纯js中的答案,但有点简单,因为它在文档元素上放置一个事件监听器并检查焦点元素是否为数字输入:

document.addEventListener("mousewheel", function(event){
    if(document.activeElement.type === "number"){
        document.activeElement.blur();
    }
});

如果要在某些字段上关闭值滚动行为,而不是其他字段,请执行以下操作:

document.addEventListener("mousewheel", function(event){
    if(document.activeElement.type === "number" &&
       document.activeElement.classList.contains("noscroll"))
    {
        document.activeElement.blur();
    }
});

有了这个:

<input type="number" class="noscroll"/>

如果输入具有noscroll类,则滚动时不会更改,否则一切都保持不变.

Answer 7

您只需使用HTML onwheel属性即可.

滚动浏览页面的其他元素时,此选项无效.

并且为所有输入添加一个监听器在后面动态创建的输入中不起作用.

另外,您可以使用CSS删除输入箭头.

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

<input type="number" onwheel="this.blur()" />

Answer 8

对于任何使用 React 并寻找解决方案的人。我发现最简单的方法是在 Input 组件中使用 onWheelCapture 道具，如下所示：

onWheelCapture={e => { e.target.blur() }}

Answer 9

我有一个替代建议。我看到的大多数触发模糊事件的常见建议的问题是它具有意想不到的副作用。意外移除焦点状态并不总是一件好事。

为什么不是这个呢？

<input type="number" onwheel="return false;" />

它非常简单直接，易于实现，而且没有我能想到的副作用。

Answer 10

打字稿变体

Typescript 需要知道您正在使用 HTMLElement 以确保类型安全，否则您会看到很多Property 'type' does not exist on type 'Element'类型的错误。

document.addEventListener("wheel", function(event){
  const numberInput = (<HTMLInputElement>document.activeElement);
  if (numberInput.type === "number") {
    numberInput.blur();
  }
});

Answer 11

最简单的解决方案是添加onWheel={ event => event.currentTarget.blur() }}输入本身。

Answer 12

首先,您必须通过以下任一方式停止鼠标滚轮事件

1. 用它禁用它 mousewheel.disableScroll
2. 拦截它 e.preventDefault();
3. 通过从元素中删除焦点 el.blur();

前两种方法都阻止窗口滚动,最后一种方法从元素中移除焦点; 两者都是不良后果.

一种解决方法是el.blur()在延迟后使用并重新聚焦元素:

$('input[type=number]').on('mousewheel', function(){
  var el = $(this);
  el.blur();
  setTimeout(function(){
    el.focus();
  }, 10);
});