Question

我想将输入字段“数字”设置为分钟部分。我尝试了maxlength = 2以及该输入字段的最小和最大值。但是当手动输入时，它接受到99。如何将其设置为最大59？

<input id="minutes" 
       name="minutes" 
       class="form-control ui-control del-keyup tr-ui-witdh text-center" 
       placeholder="00" 
       type="number" 
       min="0" 
       max="59" 
       maxlength="2" 
       onkeyup="getMessage();" 
       onclick ="getMessage();" 
       onchange="getMessage();" 
       oninput="javascript: if (this.value.length > this.maxLength) 
       this.value = this.value.slice(0, this.maxLength); "maxlength = "2">

Answer 1

您可以尝试以下操作：

function getMessage() {
    var val = document.getElementById('minutes').value;
    if (val > 59) {
      document.getElementById('minutes').value = '59';
    } else if (val < 0) {
      document.getElementById('minutes').value = '0';
    }

  }

<input id="minutes" name="minutes" class="form-control ui-control del-keyup tr-ui-witdh text-center" placeholder="00" type="number" min="0" max="59" maxlength="2" onkeyup="getMessage();" onclick="getMessage();" onchange="getMessage();" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength); "
  maxlength="2">

Answer 2

这样做

document.querySelector("input").addEventListener("input", e => {
  const value = e.target.value;
  if (value > 59) {
    e.target.value = 59;
  } else if (value < 0) {
    e.target.value = 0;
  }
})

<input id="minutes" name="minutes" class="form-control ui-control del-keyup tr-ui-witdh text-center" placeholder="00" type="number">

Answer 3

代替您的oninput函数，将此属性添加到输入元素：

onkeyup="checkRange(this, 0, 59)"

它将在每位数字后调用函数 checkRange 。函数本身看起来像这样：

function checkRange(element, min, max) {
    if (element.value > max) {
        element.value = max;
  } else if (element.value < min) {
        element.value = min;
    }
}

它将调用元素以及最小值和最大值作为参数，因此您可以在其他输入字段（例如小时）中重复使用它。

提琴：jsfiddle.net/8rgmo7wk/7/

如何在输入的“数字”字段中设置分钟，它只能接受0到59的值

3 个答案: