3

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

4

3 回答 3

5

您不需要使用 Javascript 来控制滑块，但您确实需要 Javacript 的一些帮助来聚焦滑块元素。如果用户选择元素，它根本不需要任何 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>
于 2012-04-09T12:02:35.713 回答
3

也许您需要这样的东西： jsfiddle 中的示例。滑块可以用鼠标正常移动，但是如果单击按钮，则可以使用箭头进行精确移动，如果再次单击，则侦听器将被删除，并且箭头什么也不做。

于 2012-04-09T11:42:05.980 回答
0

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

于 2020-05-20T11:25:26.060 回答