Question

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

Answer 1

您不需要使用Javascript来控制滑块，但是您需要Javacript的一些帮助来聚焦滑块元素。如果用户选中该元素，它将在没有任何Javascript的情况下工作。

E.g。

<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

也许你需要这样的东西： example in jsfiddle。滑块可以使用鼠标正常移动，但如果单击按钮，则可以使用箭头进行精确移动，如果再次单击，则会删除侦听器，箭头不会执行任何操作。

Answer 3

我发现，鉴于已经存在用于管理滑块的脚本，您只需要向滑块添加“ step”属性即可设置由按键引起的更改量。

如何使用键盘箭头键移动html5范围滑块手柄

3 个答案: