Javascript 禁用在`<；输入类型=数字>`

是否可以禁用滚轮更改输入数字字段中的数字？ 我已经用webkit特定的CSS删除了微调器，但我想完全摆脱这种行为。我喜欢使用

type=number

，因为它在iOS上提供了一个漂亮的键盘

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

有关jQuery示例和跨浏览器解决方案，请参见相关问题：

@Semyon Perepelitsa

有一个更好的解决方案。从输入中移除焦点，这是您不想要的副作用。您应该改用evt.preventDefault。这可以防止用户滚动时输入的默认行为。代码如下：

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

---

防止mousewheel事件对其他人建议的输入数字元素的默认行为（调用“blur（）”通常不是首选方法，因为这不是用户想要的）

但是。我会避免在所有输入数字元素上一直监听mousewheel事件，而只在元素处于焦点时（即问题存在时）才这样做。否则，当鼠标指针位于输入数字元素上的任何位置时，用户无法滚动页面

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')
})

---

（将焦点事件委托给周围的表单元素-以避免多个事件侦听器，这对性能有害。）

首先，必须通过以下方式之一停止鼠标滚轮事件：

使用鼠标滚轮禁用它。禁用滚动

用

e.preventDefault（）截取它

通过从元素

el.blur（）中移除焦点

前两种方法都阻止窗口滚动，最后一种方法从元素中移除焦点；这两者都是不可取的结果

一种解决方法是使用

el.blur（）

并在延迟后重新聚焦元素：

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

一个事件侦听器来管理所有事件 这与纯js中的类似，但更简单，因为它在document元素上放置一个事件侦听器，并检查聚焦元素是否为数字输入：

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

如果您想关闭某些字段的值滚动行为，而不是其他字段的值滚动行为，只需执行以下操作：

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

为此：

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

如果一个输入有noscroll类，它不会在scroll上更改，否则一切都保持不变

---

提供的答案在Firefox（Quantum）中不起作用。需要将事件侦听器从鼠标滚轮更改为滚轮：

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

---

此代码适用于Firefox Quantum和Chrome。

您只需使用HTML属性即可

此选项对滚动页面的其他元素没有影响

并为所有输入添加一个侦听器。这些输入在以后动态创建的输入中不起作用

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

输入[type=“number”]：：-webkit外部旋转按钮，
输入[type=“number”]：：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
输入[type=“number”]{
-moz外观：textfield；
}

---

适用于与React合作并寻求解决方案的任何人。我发现最简单的方法是在输入组件中使用onWheelCapture道具，如下所示：

e.target.parentElement.dispatchEvent(e);

function handleScroll(e) {
  if (e.target.tagName.toLowerCase() === 'input'
    && (e.target.type === 'number')
    && (e.target === document.activeElement)
    && !e.target.readOnly
  ) {
      e.target.readOnly = true;
      setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
  }
}
document.addEventListener('wheel', function(e){ handleScroll(e); });

onWheelCapture={e=>{
e、 target.blur（）
}}

当我试图为自己解决这个问题时，我注意到实际上可以保留页面的滚动和输入的焦点，同时通过尝试在捕获它的

的父元素上重新触发捕获的事件来禁用数字更改，如下所示：

e.target.parentElement.dispatchEvent(e);

function handleScroll(e) {
  if (e.target.tagName.toLowerCase() === 'input'
    && (e.target.type === 'number')
    && (e.target === document.activeElement)
    && !e.target.readOnly
  ) {
      e.target.readOnly = true;
      setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
  }
}
document.addEventListener('wheel', function(e){ handleScroll(e); });

然而，这会在浏览器控制台中导致错误，并且可能不能保证在任何地方都能工作（我只在Firefox上测试过），因为这是故意编写的无效代码

至少在Firefox和Chromium上运行良好的另一个解决方案是临时将

元素

设为只读，如下所示：

e.target.parentElement.dispatchEvent(e);

function handleScroll(e) {
  if (e.target.tagName.toLowerCase() === 'input'
    && (e.target.type === 'number')
    && (e.target === document.activeElement)
    && !e.target.readOnly
  ) {
      e.target.readOnly = true;
      setTimeout(function(el){ el.readOnly = false; }, 0, e.target);
  }
}
document.addEventListener('wheel', function(e){ handleScroll(e); });

我注意到的一个副作用是，如果对
readOnly
字段使用不同的样式，它可能会导致字段在瞬间闪烁，但至少对我来说，这似乎不是问题

类似地，（正如James在回答中所解释的），您可以
blur（）
该字段，然后
focus（）
将其恢复，而不是修改
readOnly
属性，但同样，根据使用的样式，可能会出现一些闪烁

或者，正如在这里的其他注释中所提到的，您可以对事件调用
preventDefault（）
。假设您只处理位于焦点和鼠标光标下的数字输入上的
wheel
事件（这是上述三个条件所表示的），则对用户体验的负面影响几乎为零。
Typescript变体
Typescript需要知道您正在使用HTMLElement以确保类型安全，否则您将看到类型“Element”上不存在大量属性“type”

type错误

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

document.addEventListener（“控制盘”），函数（事件）{
常量numberInput=（document.activeElement）；
如果（numberInput.type==“number”）{
numberInput.blur（）；
}
});

如果您想要一个不需要JavaScript的解决方案，将一些HTML功能与CSS伪元素结合起来可以实现以下目的：

span{
位置：相对位置；
显示：内联块；/*环绕内容*/
}
span：：之后{
内容：“；
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；/*在包含块上拉伸*/
光标：文本；/*恢复工字梁光标*/
}
/*编辑时还原上下文菜单*/
输入：焦点{
位置：相对位置；
z指数：1；
}

你嘴里能装多少Java脚本？

最简单的解决方案是在输入本身上添加

onWheel={event=>event.currentTarget.blur（）}

我有另一个建议。我看到的大多数关于触发模糊事件的常见建议的问题是，它具有意外的si