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

概述我在网页上有一个输入控件,类似于： <input type="number" name="value" /> 如果此控件具有焦点并且我按下向上或向下箭头键,则文本框中的值递增或递减(IE中除外).我想禁用此功能,最好使用CSS.我已经使用CSS删除了微调器按钮.我意识到我可以使用JavaScript捕获keydown事件,但我想允许箭头键继续向上或向下滚动页面. 没有办法完成你纯粹用CSS描述的行 我在网页上有一个输入控件,类似于：

<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 – 防止箭头键更改数字输入中的值全部内容，希望文章能够帮你解决html – 防止箭头键更改数字输入中的值所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。