禁止在<input type = number>上滚动
是否可以禁用滚轮更改input号码字段中的数字？ 我已经搞乱了webkit特定的CSS来删除微调，但我想完全摆脱这种行为。 我喜欢使用type=number因为它在iOS上提供了一个不错的键盘。
防止mousewheel事件对其他人所build议的input-number元素的默认行为（调用“blur（）”通常不会是首选的方式，因为这不会是用户想要的）。
但。 我会避免在所有input数字元素上始终监听mousewheel事件，只有在元素处于焦点时（即存在问题时）才能执行此操作。 否则，当鼠标指针位于input数字元素的任何位置时，用户将无法滚动页面 。
解决schemejQuery：
// 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('mousewheel.disableScroll', function (e) { e.preventDefault() }) }) $('form').on('blur', 'input[type=number]', function (e) { $(this).off('mousewheel.disableScroll') })
（将焦点事件委托给周围的表单元素 – 以避免许多事件侦听器，这对性能不利。）
input = document.getElementById("the_number_input") input.addEventListener("mousewheel", function(event){ this.blur() })
对于jQuery示例和跨浏览器解决scheme，请参阅相关问题：
数字input滚动的HTML5事件侦听器 – 仅限Chrome
@Semyon Perepelitsa
对此有一个更好的解决scheme。 模糊从input中删除焦点，这是你不想要的副作用。 您应该使用evt.preventDefault。 这可以防止用户滚动时input的默认行为。 这里是代码：
input = document.getElementById("the_number_input") input.addEventListener("mousewheel", function(evt){ evt.preventDefault(); })
一个事件监听者统治他们
这与@Semyon Perepelitsa在纯js中的答案类似，但更简单一些，因为它将一个事件监听器放在文档元素上，并检查被聚焦的元素是否是数字input：
document.addEventListener("mousewheel", function(event){ if(document.activeElement.type === "number"){ document.activeElement.blur(); } });
如果你想closures一些字段的值滚动行为，而不是其他的只是做这个：
document.addEventListener("mousewheel", function(event){ if(document.activeElement.type === "number" && document.activeElement.classList.contains("noscroll")) { document.activeElement.blur(); } });
有了这个：
<input type="number" class="noscroll"/>
如果一个input有noscroll类，它不会改变滚动，否则一切都保持不变。
$(document).on("wheel", "input[type=number]", function (e) { $(this).blur(); });
首先你必须停止鼠标滚轮事件：
- 用
mousewheel.disableScroll禁用它 - 使用
e.preventDefault();截取它e.preventDefault(); - 通过从元素中删除焦点
el.blur();
前两种方法都停止滚动窗口，最后一个从元素中删除焦点; 这两者都是不希望的结果。
一个解决方法是使用el.blur()并在延迟之后重新调整元素的el.blur() ：
$('input[type=number]').on('mousewheel', function(){ var el = $(this); el.blur(); setTimeout(function(){ el.focus(); }, 10); });
function fixNumericScrolling() { $$( "input[type=number]" ).addEvent( "mousewheel", function(e) { stopAll(e); } ); } function stopAll(e) { if( typeof( e.preventDefault ) != "undefined" ) e.preventDefault(); if( typeof( e.stopImmediatePropagation ) != "undefined" ) e.stopImmediatePropagation(); if( typeof( event ) != "undefined" ) { if( typeof( event.preventDefault ) != "undefined" ) event.preventDefault(); if( typeof( event.stopImmediatePropagation ) != "undefined" ) event.stopImmediatePropagation(); } return false; }
下面的CSS修复似乎更简单：
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
参考
