Question

我的联系方式中有两个输入字段，在两个字段中都只能填写一个数字。我的问题是，有没有办法使字段1中的数字永远不会大于字段2中的数字？

我到处都看过，但找不到解决方案。（使用Javascript）甚至有可能吗？希望有人能找到解决方案，或者可以向我发送正确的方向。

<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>

Answer 1

function forceLimit(e) {
   var limit = e.target.getAttribute("max");
   if(e.target.value > limit)
     e.target.value = limit;
}

function handleLimitChange(e) {
  var limit = e.target.value;
  var fieldOne = document.querySelector('#field-one');
  if(fieldOne.value > limit) {
     fieldOne.value = limit;
  }
  fieldOne.setAttribute('max', limit);
}

<form>
<input type="number" id="field-one" class="fieldone" onchange="forceLimit(event)" min="0" max="16" step="0.1">
<input type="number" id="field-two" class="fieldtwo" onchange="handleLimitChange(event)" min="0" max="16" step="0.1">
</form>

Answer 2

您可以使用jQuery检查字段2中的值始终大于或等于字段1：

$('.fieldone').change(function(){
  checkValue();
});

$('.fieldtwo').change(function(){
  checkValue();
});

function checkValue(){
  var maxValue = $('.fieldtwo').val();
  if(maxValue > 0 && $('.fieldone').val() > maxValue){
    $('.fieldone').val(maxValue);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="number" class="fieldone" min="0" max="16" step="0.1">
<input type="number" class="fieldtwo" min="0" max="16" step="0.1">
</form>

输入字段中的数字不高于其他输入字段

2 个答案: