Les entrées du numéro de liaison Jquery ne fonctionnent pas lorsque vous augmentez les puissances de dix (1000, 10000, 100000, etc.)

Question

J'ai deux entrées numériques liées entre elles qui s'incrémentent en 1000s, l'une est une plage supérieure et l'autre une borne inférieure gamme. Lorsque la plage inférieure est supérieure à la plage supérieure, la plage supérieure change automatiquement l'attribut 'value' et 'min' pour correspondre à la valeur inférieure de la plage. Cependant, chaque fois que l'entrée de plage supérieure atteint une puissance de dix seuils (9000, 90000, etc.) en augmentant la valeur de plage inférieure, elle s'arrête tout simplement lorsque la plage inférieure peut continuer. Est-ce que quelqu'un sait pourquoi c'est et comment empêcher cela de se produire?

https://jsfiddle.net/tg0ck5r1/

HTML:

<input type="number" id="upperBidRange" step="1000" > 
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000"> 

JS:

function SetBidIncrementAmountAndUpperBidRangeMins() { 
     $('#upperBidRange').attr('min', $('#lowerBidRange').val()); 
    } 

function SetBidIncrementAmountAndUpperBidRangeValues() { 
    $('#upperBidRange').val($('#lowerBidRange').val()) 
} 

$(SetBidIncrementAmountAndUpperBidRangeMins); 
$(SetBidIncrementAmountAndUpperBidRangeValues); 

$('#lowerBidRange').bind('keyup mouseup onwheel input keypress change paste', function() { 
    SetBidIncrementAmountAndUpperBidRangeMins(); 

    if ($('#lowerBidRange').val() > $('#upperBidRange').val()) { 
    $(SetBidIncrementAmountAndUpperBidRangeValues); 
    } 
}); 

Answer 1

inputvaleur stocke toujours une chaîne donc .val() ou this.value vous donnera toujours une chaîne.
Faire if (String > String) { ne vous donnera pas souhaité parce que vous voulez nombres

Au lieu de cela, utilisez parseInt(value, radix)^{MDN Docs}

parseInt($('#lowerBidRange').val() , 10) 

Voici comment:

jQuery(function($) { 
 
    // DOM is now ready and $ alias secured 
 

 
    var $upper = $('#upperBidRange'), 
 
     $lower = $('#lowerBidRange'); 
 

 
    function setUpperMin() { 
 
    $upper.attr('min', $lower.val()); 
 
    } 
 

 
    function setUpperVal() { 
 
    $upper.val($lower.val()); 
 
    } 
 

 
    setUpperMin(); 
 
    setUpperVal(); 
 

 
    $lower.on('input', function() { 
 

 
    setUpperMin(); 
 

 
    var lowerVal = parseInt(this.value, 10), 
 
     upperVal = parseInt($upper.val(), 10); 
 

 
    if (lowerVal > upperVal) { 
 
     setUpperVal(); 
 
    } 
 

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="number" id="upperBidRange" step="1000">UPPER 
 
<br> 
 
<input type="number" id="lowerBidRange" step="1000" min="1000" value="1000">LOWER

Une simple variante serait d'utiliser unaire +Chaîne → Nombre conversion

$lower.on('input', function() { 

    setUpperMin(); 

    if (+this.value > +$upper.val()) { 
     setUpperVal(); 
    } 

    });