Question

我有一个HTML5'范围'控件，我想在其中添加一个加号（+）和减号（ - ）按钮。

小提琴效果很好，只是在'点击并按住'时，值只增加（或减少）一次。 虽然我想要的是它应该持续增加（或减少）。

HTML，

<input type='button' id='minus'/>
<div class='range-container'>
    <input id='range' type='range' min='0' max='100' step='1'/>
</div>
<input type='button' id='plus'/>

的JavaScript，

$('#plus').click(function() {
    $('#range').val(parseInt($('#range').val()) + 1);
});

$('#minus').click(function() {
    $('#range').val(parseInt($('#range').val()) - 1);
});

HTML5'数字'控件本身就有这种体验。

通过SO看，无法在任何地方找到这个问题。我得到的最近的是this，它只会再次点击一次。

Answer 1

您可以使用requestAnimationFrame不断检查是否仍然按下任何按钮。如果仍然按下，您可以增加或减少您的值。

创建一个从零开始的'number'变量。
如果按下“添加”按钮，请将“isDown”变量设置为1。
如果按下Subtract按钮，请将'isDown'变量设置为-1。
如果释放任何按钮，请将'isDown'变量设置为0;
启动requestAnimationFrame循环，不断检查'isDown'是否为零。如果不为零，requestAnimationFrame会将'number'变量更改为isDown值。

这是示例代码和演示：

var $result=$('#result');
var number=0;
var isDown=0;
var delay=250;
var nextTime=0;

requestAnimationFrame(watcher);

$("button").mousedown(function(e){handleMouseDown(e);});
$("button").mouseup(function(e){handleMouseUp(e);});
$("button").mouseout(function(e){handleMouseUp(e);});


function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // Put your mousedown stuff here
  isDown=(e.target.id=='Add')?1:-1;
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // Put your mouseup stuff here
  isDown=0;
}

function watcher(time){
  requestAnimationFrame(watcher);
  if(time<nextTime){return;}
  nextTime=time+delay;
  if(isDown!==0){
    number+=isDown;
    $result.text(number);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=Add>Add</button>
<button id=Subtract>Subtract</button>
<span id='result'>0</span>

Answer 2

修改，更新

尝试

var range = $("#range")
, fx = function(elem, prop) {
  return elem
    .animate({
      value: range.prop(prop)
    }, {
      duration: 3000,
      easing: "linear",
      step: function(now) {
             elem.val(now + prop === ("max","+"||"min","-") + elem.prop("step"))
      }
    })
};

$('#plus').mousedown(function(e) {
  fx(range, "max")
});

$('#minus').mousedown(function minus(e) {
  fx(range, "min")
});

$(document).mouseup(function(e) {
  range.stop(true, false)
});

jsfiddle http://jsfiddle.net/bnesu3h9/3/

＆＃13;

var range = $("#range")
, fx = function(elem, prop) {
  return elem
    .animate({
      value: range.prop(prop)
    }, {
      duration: 3000,
      easing: "linear",
      step: function(now) {
        elem.val(now + prop === ("max","+"||"min","-") + elem.prop("step"))
      }
    })
};

$('#plus').mousedown(function(e) {
  fx(range, "max")
});

$('#minus').mousedown(function minus(e) {
  fx(range, "min")
});

$(document).mouseup(function(e) {
  range.stop(true, false)
});

＆＃13;

#plus {
  width: 15px;
  height: 15px;
  background-color: red;
  float: left;
}
#minus {
  width: 15px;
  height: 15px;
  background-color: blue;
  float: left;
}
.range-container {
  float: left;
  overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='button' id='minus' />
<div class='range-container'>
  <input id='range' type='range' min='0' max='100' step='1' />
</div>
<input type='button' id='plus' />

＆＃13;

Answer 3

This answer应该有帮助。

点击事件包括mouseup和mousedown。您最初需要单独处理mousedown，并不断检查鼠标是否仍然处于关闭状态。您可以停止检查文档mouseup。

Answer 4

对此的基本方法是在按下其中一个按钮时以特定间隔开始循环，在每个刻度处进行值更改。单击按钮时启动，释放按钮时停止。这里只是用于概念演示目的的简单代码：

// Store the reference
var range = $('#range');

// These functions will change the value
function increment () {
    range.val(parseInt(range.val()) + 1)
}

function decrement () {
    range.val(parseInt(range.val()) - 1)
}

// Attaches polling function to element
function poll (el, interval, fn) {
    var isHeldDown = false;

    return el
    .on("mousedown", function() {
        isHeldDown = true;

        (function loop (range) {
            if (!isHeldDown) return; // Stop if it was released
            fn();
            setTimeout(loop, interval); // Run the function again       
        })();
    })
    .on("mouseup mouseleave", function () {
        isHeldDown = false; // Stop polling on leave or key release
    });
}

poll($("#plus"), 40, increment);
poll($("#minus"), 40, decrement);

JSFiddle

在生产等级版本中，您需要应用计时功能而不是恒定间隔;考虑应该开始和停止轮询的所有可能事件，以便当用户移动指针或其他东西时它不会永远停留;使用requestAnimationFrame可以更精确地控制计时功能。

在鼠标保持时连续递增值

4 个答案: