3

大きな最大値を持つ html5 範囲スライダーに出くわしたとき、スライダーはより高い値にジャンプし、マウスで移動しているときに中間値を取ることができません。そのため、javascript などを使用して、キーボードを使用してスライダーを制御しようとしています。これは初心者です。誰でも私を助けてくれませんか。前もって感謝します

4

3 に答える 3

5

スライダーを制御するために Javascript を使用する必要はありませんが、スライダー要素に焦点を合わせるには Javascript の助けが少し必要です。ユーザーが要素にタブで移動すると、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 に答える