javascript - 手动输入值时不考虑最大属性

Question

我有一个 input 字段，我试图为其复制 0 - 24 日的小时数:

<input type="number" min="0" max="24" step="1" value="00" class="time-hours">
<input type="number" min="0" max="60" step="1" value="00" class="time-seconds">

当我点击上/下 V 形时，我可以转到的最大值和最小值是 24 和 0，如我的属性中所设置的那样。

但是，如果我点击一个单元格，我可以输入任何数字，例如100.

如何确保只能输入 0 到 24 之间的数字？

Answer 1

如果它是一个表单提交，浏览器将阻止用户。但是如果你真的需要验证，你可以这样做:

$(".time-hours").keyup(function() {
  if ($(this).val() > 24) {
    $(this).val("24");
  }
    if ($(this).val() < 0) {
    $(this).val("0");
  }
});

$(".time-seconds").keyup(function() {
  if ($(this).val() > 60) {
    $(this).val("60");
  }
    if ($(this).val() < 0) {
    $(this).val("0");
  }
});

Here is the JSFiddle demo