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

Question

我在网页上有一个类似这样的输入控件:

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

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

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

Answer 1

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

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

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

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