如何彻底禁止鼠标滚轮修改integer类型输入框的数值？

一、自定义Web仪表板（前端处理） #

如果你的JSON仪表板是前端渲染的，直接通过监听滚轮事件阻止默认行为就能解决：

• 先定位到dataType为integer的输入框，比如通过属性选择器
• 给输入框绑定wheel事件，调用preventDefault()阻断滚轮修改数值的默认动作

示例代码：

// 匹配所有data-type="integer"的输入框（根据实际属性名调整）
document.querySelectorAll('input[data-type="integer"]').forEach(input => {
  input.addEventListener('wheel', (e) => e.preventDefault());
});

要是用jQuery的话：

$('input[data-type="integer"]').on('wheel', function(e) {
  e.preventDefault();
});

二、现有可视化工具（如Grafana）的配置调整 #

如果是用Grafana这类现成工具搭建的JSON仪表板，先检查工具有没有内置配置项：

• 找到输入框的配置节点，添加enableMouseWheel: false（不同工具字段名可能有差异，比如部分工具叫scrollWheel）
• 配置片段示例：

{
  "type": "input",
  "dataType": "integer",
  "options": {
    "enableMouseWheel": false
  }
}

如果工具没提供对应配置，就用上面的前端脚本，通过工具的自定义脚本功能注入代码。

额外提示 #

• 要确保脚本在输入框渲染完成后执行，不然会找不到目标元素
• 遇到事件冒泡问题时，可以追加e.stopPropagation()来阻止事件向上传递

内容的提问来源于stack exchange，提问作者Massimo Borzellino