防止箭头键更改数字输入中的值

Question

我在类似于此的网页上有一个输入控件：

 <input type="number" name="value" />

如果此控件具有焦点并且我按下了向上或向下箭头键，那么文本框中的值将递增或递减（IE 除外）。

我想禁用此功能，最好使用 CSS。我已经使用 CSS 删除了微调器按钮。我意识到我可以使用 JavaScript 来捕获 keydown 事件，但我想允许箭头键继续向上或向下滚动页面。

原文由 Rono 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

没有办法完全用 CSS 来完成您所描述的行为，因为 CSS 处理显示，我们在这里讨论的是行为和键盘事件。

我建议向您的输入添加一个事件侦听器，这将防止箭头键对其产生影响，而实际上阻止页面滚动且输入不在焦点中：

 document.getElementById('yourInputID').addEventListener('keydown', function(e) {
    if (e.which === 38 || e.which === 40) {
        e.preventDefault();
    }
});

如果您有任何机会在输入处于焦点时希望箭头键滚动页面事件，我建议使用 JQuery，这将使您编写更少的代码并且它将支持所有浏览器。

原文由 Ghassen Louhaichi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您使用的是 Angular，请尝试：

 <input type="number"onwheel="return false;" (keydown.arrowup)="(false) (keydown.arrowdown)="(false)"/>

原文由 Naman Mittal 发布，翻译遵循 CC BY-SA 4.0 许可协议