Question

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

这是我到目前为止所做的：

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>

JS

 $('.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();
    }
});

我正在为每个输入字段设置min和max值，但是我没有为每个输入组设置min和max值被创建。我需要设置组的最大值或添加验证以检查组的总值是否小于或等于 grpmax

Answer 1

尝试

function add(groupId,val) {
  let inp = document.querySelector(`[name=numbergroup_${groupId}]`);
  inp.value= +inp.value + val;
  if(inp.value<+inp.min) inp.value=inp.min;
  if(inp.value>+inp.max) inp.value=inp.max;
}

Min:-2, Max:5
<div class="center">
  <div class="input-group">
    <span class="input-group-btn">
      <button type="button" onclick="add(123,-1)" >
        <span class="glyphicon glyphicon-minus">-</span>
      </button>
    </span>
    <input type="text" name="numbergroup_123" value="0"  min="-2"  max="5">
    <span class="input-group-btn">
      <button type="button" onclick="add(123,1)" >
        <span class="glyphicon glyphicon-plus">+</span>
      </button>
    </span>
  </div>
</div>

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

1 个答案: