如何使用键盘箭头键移动 html5 范围 slider 句柄

Question

当我遇到具有较大最大值的 html5 范围 slider 时，slider 会跳到更高的值，并且无法在用鼠标移动时获取中间值。 所以我试图在 javascript 或其他一些帮助下使用键盘控制 slider。 我是这个的新手。 任何人都可以帮助我。 提前致谢

Answer 1

您不需要使用 Javascript 来控制 slider，但您确实需要 Javacript 的一些帮助来聚焦 slider 元素。 如果用户跳转到该元素，它会在没有任何 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>

Answer 2

也许您需要这样的东西： jsfiddle 中的示例。 slider 可以用鼠标正常移动，但如果你点击按钮，你可以用箭头精确移动，如果你再次点击，监听器被移除，箭头什么也不做。

Answer 3

我发现，假设已经存在用于管理 slider 的脚本，您只需向 slider 添加属性“step”以设置按键引起的变化量。

如何使用键盘箭头键移动 html5 范围 slider 句柄

问题描述

3 个解决方案

解决方案1
5 已采纳 2012-04-09 12:02:35

解决方案2
3 2012-04-09 11:42:05

解决方案3
0 2020-05-20 11:25:26

如何使用键盘箭头键移动 html5 范围 slider 句柄

问题描述

3 个解决方案

解决方案1 5 已采纳 2012-04-09 12:02:35

解决方案2 3 2012-04-09 11:42:05

解决方案3 0 2020-05-20 11:25:26

解决方案1
5 已采纳 2012-04-09 12:02:35

解决方案2
3 2012-04-09 11:42:05

解决方案3
0 2020-05-20 11:25:26