Question

当您在其中单击并将鼠标向上拖动以增大值并向下拖动以减小值时，如何使输入类型文本更改其值。只有当鼠标上下移动时，值才会从输入变化（验证min y max）我有这个但是我不能让它像希望一样工作。

var clicking = false;
$('#change_value_up_down').mousedown(function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});
var i = 0;
var y = 0;
$('#change_value_up_down').mousemove(function(my){
    if(clicking === false) return;

    // change value
    y = my.pageY - this.offsetTop;
    $(this).val(y);

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moved ' + i);
  i++;
});
$('.selector').mouseup(function() {
  i = 0;
});

Answer 1

<强> Working fiddle

我认为你想要像以下例子那样的事情。

var down = false;
var my = $("#change_value_up_down").offset().top;
var counter;

$(document).mousedown(function() {
  down = true;
}).mouseup(function() {
  down = false;  
  clearInterval(counter);
});

$("#change_value_up_down").mouseenter(function(e) {
  clearInterval(counter);
})

$("#change_value_up_down").mouseout(function(e) {
  var current_value = $(this).val();
  var self = $(this);

  if(down) {
    if(e.clientY<my) {
       counter = setInterval(function(){
          self.val(current_value++);
       },300);
    }else{
      counter = setInterval(function(){
          self.val(current_value--);
       },300);
    }
  }
});

希望这有帮助。

var down = false;
var speed = 100;
var my = $("#change_value_up_down").offset().top;
var counter;

$(document).mousedown(function() {
  down = true;
}).mouseup(function() {
  down = false;  
  clearInterval(counter);
});
$("#change_value_up_down").mouseenter(function(e) {
  clearInterval(counter);
})

$("#change_value_up_down").mouseout(function(e) {
  var current_value = $(this).val();
  var self = $(this);
  
  if(down) {
    if(e.clientY<my) {
       counter = setInterval(function(){
       		self.val(current_value++);
       },speed);
    }else{
      counter = setInterval(function(){
       		self.val(current_value--);
       },speed);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<br><br>
<input type="text" value=5 id="change_value_up_down" size="2" style="cursor:n-resize;"/>

Answer 2

您还可以使用fiddle：

JS：

    var clicking = false;
        $('this').click(function () {
            clicking = false;
        });
        $('#change_value_up_down').mouseover(function () {
            clicking = true;
        });
        var i = 0;
        var y = 0;
        $(this).mousemove(function(my){
            if(clicking === false) 
            {
                return false;
            }
            else
            {
                // change value
                if (my.pageY <= $('#change_value_up_down').offset().top + $('#change_value_up_down').css('width').replace('px', '')/10) 
                {
                    y = parseInt($('#change_value_up_down').val()) +1 ;
                    $('.movestatus').text('plus');
                    }
                else
                {
                    y =  parseInt($('#change_value_up_down').val()) -1;
                    $('.movestatus').text('minus');
                    }
                $('#change_value_up_down').val(parseInt(y));  
                // Mouse click + moving logic here
                //$('.movestatus').text('mouse moved ' + i);
                i++;
            }
        });
        $('#change_value_up_down').mouseup(function(e) {
            clicking = false;
            //e.stopPropagation();
        });
        $('.selector').mouseup(function(e) {
            i = 0;
        });

Answer 3

我能在其他语言的帖子中找到答案，目前效果很好。

https://es.stackoverflow.com/questions/34265/jquery-funcion-que-permita-a-n-numeros-de-inputs-hacer-incremento-decremento-por/

上下拖动鼠标时jQuery更改值输入

3 个答案: