如何使用键盘箭头键移动html5范围滑块手柄
如何使用键盘箭头键移动html5范围滑块手柄
提问于 2012-04-09 17:19:55
当我遇到最大值较大的html5范围滑块时，滑块会跳转到较高的值，并且无法在使用鼠标移动时获得中间的值。所以我试着在javascript或其他工具的帮助下，用键盘来控制滑块。我是这方面的新手。有人能帮帮我吗？提前感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-04-09 20:02:36
您不需要使用Javascript来控制滑块，但是您确实需要来自Javacript的一些帮助来聚焦滑块元素。如果用户使用Tab键切换到元素，它将在没有任何Javascript的情况下工作。
例如。
<html><head><title>bla</title></head>
<body>
<input type="range" id="slider" min="0" max="100" value="50" />
<script type="text/javascript">
document.getElementById('slider').addEventListener('click', function() {
this.focus();
});
</script>
</body>
</html>对于多个滑块，可以在<script>标记中执行此操作。您不需要在各个滑块上编写任何代码：
<script>
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == 'range') {
inputs[i].addEventListener('click', function() {
this.focus();
});
}
}
</script>Stack Overflow用户
发布于 2012-04-09 19:42:06
也许你需要这样的东西：example in jsfiddle。可以使用鼠标正常移动滑块，但如果单击按钮，则会使用箭头进行精确移动，如果再次单击，则侦听器将被移除，并且箭头不会执行任何操作。
Stack Overflow用户
发布于 2020-05-20 19:25:26
我发现，考虑到已经存在用于管理滑块的脚本，您只需向滑块添加"step“属性来设置按键引起的变化量。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10071244
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号