當鼠標向上和向下拖動時，jQuery改變了數值輸入

Question

當你點擊它並向上拖動鼠標增加數值並減小數值時，如何讓輸入類型文本改變它的值。只有當鼠標上下移動時，輸入值纔會改變（驗證最小最大）我有這個，但是我不能讓它作爲一個願望工作。

JSBin Example

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(){ 
 
     \t \t self.val(current_value++); 
 
     },speed); 
 
    }else{ 
 
     counter = setInterval(function(){ 
 
     \t \t 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/