如何防止用戶拖動HTML輸入type ='range'對不對？

Question

我有三個輸入類型='範圍'字段，它們具有不同的最大值但共享相同的容量。隨着三個輸入中的任何一個的變化，這個容量都會減少。當容量達到0時，我應該防止輸入字段向右移動（從增加它們的值）並且只向左移動，但我不知道如何使用JS和jQuery執行此操作。

這裏是輸入的html

<input type="range" class="slider" id="woodSlider" min="0" value="0" max="1558"> 
<input type="range" class="slider" id="ironSlider" min="0" value="0" max="2555"> 
<input type="range" class="slider" id="stoneSlider" min="0" value="0" max="2451"> 

這裏是降低身份代碼：

$("input").change(function() { 
    $("#capacityLeft").html(parseInt(holding.capacity) - 
     $("#woodSlider").val() - 
     $("#ironSlider").val() - 
     $("#stoneSlider").val()); 
    if(parseInt($("#capacityLeft").html()) <= 0) { 
    // TODO: FIND OUT HOW TO STOP THE SLIDERS FROM MOVING 
    } 
}); 

Answer 1

好了，你可以使用event.preventDefault()制止事件的發生。您應該將函數綁定到這些範圍滑塊上的onchange或oninput事件，並計算總和，檢查它是否超過最大值，如果是，則停止事件。

Here's a pure JS solution（小提琴鏈接），可以很容易地用jQuery重寫。

var maxTotal = 150, // define the max sum of values 
    inputs = [].slice.call(document.getElementsByTagName('input')), // refrence to the elements 
    getTotal = function(){ // helper function to calculate the sum 
     var sum = 0; 
     inputs.forEach(function(input){ 
      sum += parseInt(input.value, 10); 
     }); 
     return sum; 
    }, 
    maxReached = function(e){ // check if the max is reached 
     var sum = getTotal(), target; 
     if(sum > maxTotal){ 
      target = e.target; 
      // set the max possible value if the user, for example, clicks too far to the right 
      target.value = target.value - (sum - maxTotal); 
      // next line is just for demonstrational purposes 
      document.getElementById('total').innerHTML = getTotal(); 

      // prevent increasing the value 
      e.preventDefault(); 
      return false; 
     } 
     // next line is just for demonstrational purposes 
     document.getElementById('total').innerHTML = getTotal(); 

     // everything's fine, nothing to do. 
     return true; 
    }; 

// attach the maxReached function to your inputs 
inputs.forEach(function(input){ 
    input.addEventListener('input', maxReached); 
});