-1

クリック/タッチしてから上下に移動して、マウス/指を離すまでフィールドの値を変更できる入力フィールドを作成したいと思います。

これは、最近のブラウザとAndroidおよびiPhoneで機能するはずです。

4

2 に答える 2

2

これが素早く簡単な方法です

<!doctype html>
<html>
  <head>
    <script type='text/javascript'>
      var startY;
      function loadJs(){
        document.getElementById("upDownInput").onmousedown = startMoveUpDown;
      }      

      function startMoveUpDown(e){
        startY = e.clientY;
        document.onmousemove = moveUpDown;
        document.onmouseup = endMoveUpDown;
      }

      function moveUpDown(e){
        var input = document.getElementById("upDownInput");
        var moveChange = Math.ceil(e.clientY - startY);        
        input.value = moveChange;
      }

      function endMoveUpDown(){
        document.onmousemove = null;
      }
    </script>
  </head>

  <body onload='loadJs()'>
    <input style='margin-top: 200px' value='0' type='number' id='upDownInput'/>
  </body>
</html>
于 2012-07-23T00:40:36.637 に答える
0

信頼性の高いクロスブラウザースライダーについては、jQueryUIのスライダーを確認することをお勧めします。

于 2012-07-23T00:29:38.023 に答える