如何在"numbers"输入文件中设置分钟，它应该只接受0到59的值

Question

我想将输入字段"数字"设置为分钟部分。我尝试了最大长度 = 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/