Javascript 动态设置输入组最小值和最大值

我正在寻找一种方法来更新或验证带有加号和减号按钮的动态输入组输入的最小值和最大值

以下是我迄今为止所做的工作：

HTML

 <div class="center">
  <div class="input-group">
    <span class="input-group-btn">
      <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="numbergroup'+thisgroupid+'id'+buttonid+'max&'+row.max+'"">
        <span class="glyphicon glyphicon-minus"></span>
      </button>
    </span>
    <input type="text" name="numbergroup'+thisgroupid+'id'+buttonid+'max&'+row.max+'"" value="0" class="form-control input-number" min="'+row2.min+'"  max="'+row2.max+'">
    <span class="input-group-btn">
      <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="numbergroup'+thisgroupid+'id'+buttonid+'max&'+row.max+'"">
        <span class="glyphicon glyphicon-plus"></span>
      </button>
    </span>
  </div>
</div>

试一试


函数添加（groupId，val）{
让inp=document.querySelector（`[name=numbergroup_${groupId}]`）；
输入值=+inp.value+val；
如果（输入值+输入最大值）输入值=输入最大值；
}
Min:-2，Max:5
-
+
试试看


函数添加（groupId，val）{
让inp=document.querySelector（`[name=numbergroup_${groupId}]`）；
输入值=+inp.value+val；
如果（输入值+输入最大值）输入值=输入最大值；
}
Min:-2，Max:5
-
+

 $('.btn-number').click(function(e){
e.preventDefault();
fieldName = $(this).attr('data-field');
console.log(fieldName)
 var grpmax = fieldName.split('&')[1];
 console.log(grpmax)
type      = $(this).attr('data-type');
 console.log(type)
var input = $("input[name='"+fieldName+"']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
    if(type == 'minus') {
        if(currentVal > input.attr('min')) {
            input.val(currentVal - 1).change();
        } 
        if(parseInt(input.val()) == input.attr('min')) {
            $(this).attr('disabled', true);
        }

    } else if(type == 'plus') {

        if(currentVal < input.attr('max')) {
            input.val(currentVal + 1).change();
        }
        if(parseInt(input.val()) == input.attr('max')) {
            $(this).attr('disabled', true);
        }
    }
} else {
    input.val(0);
}
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

minValue =  parseInt($(this).attr('min'));
maxValue =  parseInt($(this).attr('max'));
valueCurrent = parseInt($(this).val());

name = $(this).attr('name');
if(valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
} else {
    alert('Sorry, the minimum value was reached');
    $(this).val($(this).data('oldValue'));
}
if(valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
} else {
    alert('Sorry, the maximum value was reached');
    $(this).val($(this).data('oldValue'));
 }


 });
 $(".input-number").keydown(function (e) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});