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

前端之家收集整理的这篇文章主要介绍了html – 防止箭头键更改数字输入中的值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在网页上有一个输入控件,类似于:
<input type="number" name="value" />

如果此控件具有焦点并且我按下向上或向下箭头键,则文本框中的值递增或递减(IE中除外).我想禁用此功能,最好使用CSS.我已经使用CSS删除了微调器按钮.我意识到我可以使用JavaScript捕获keydown事件,但我想允许箭头键继续向上或向下滚动页面.

解决方法

没有办法完成你纯粹用CSS描述的行为,因为CSS处理显示,我们在这里讨论行为和键盘事件.

我建议在你的输入中添加一个事件监听器,这将阻止箭头键对它产生影响,但实际上阻止了输入的页面滚动不在焦点上:

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

如果输入是焦点,如果你想要箭头键滚动页面事件,我建议使用JQuery,这将允许你编写更少的代码,它将支持所有的浏览器.

猜你在找的HTML相关文章