禁用“<输入类型=数字>”上的滚动
2022-08-30 01:45:02
是否可以禁用滚轮更改输入数字字段中的数字?我已经搞砸了特定于webkit的CSS来删除微调器,但我想完全摆脱这种行为。我喜欢使用,因为它在iOS上带来了一个不错的键盘。type=number
是否可以禁用滚轮更改输入数字字段中的数字?我已经搞砸了特定于webkit的CSS来删除微调器,但我想完全摆脱这种行为。我喜欢使用,因为它在iOS上带来了一个不错的键盘。type=number
防止鼠标滚轮事件在输入数字元素上的默认行为,就像其他人建议的那样(调用“blur()”通常不是执行此操作的首选方法,因为那不是用户想要的)。
但。我会避免一直侦听所有输入数字元素上的鼠标滚轮事件,并且只在元素聚焦时(即问题存在时)这样做。否则,当鼠标指针位于输入编号元素上的任何位置时,用户无法滚动页面。
jQuery 的解决方案:
// disable mousewheel on a input number field when in focus
// (to prevent Chromium 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')
})
(将焦点事件委托给周围的表单元素 - 以避免许多事件侦听器,这对性能不利。
这类似于@Simon Perepelitsa在纯js中的答案,但更简单一些,因为它在文档元素上放置了一个事件侦听器,并检查聚焦元素是否是数字输入:
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 类,它不会在滚动时更改,否则一切都保持不变。