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

如果提交form，浏览器将停止用户。但是如果你真的需要验证，你可以这样做：

$(".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

Answer 2

如果您想使用javascript，可以使用以下代码：

<input type="number" min="0" max="24" step="1" value="00" class="time-hours" onblur="return minmax(this.value);">
<input type="number" min="0" max="60" step="1" value="00" class="time-seconds" onblur="return minmax(this.value);">

<script>
    function minmax(val){
        if(val > 24 || val < 0){
            alert("Value cannot be grater than 24 and min than 0");
            return false;
        }
    }
</script>

我使用了onblur，因为每当两个框中的值发生变化时，它们都会触发一个函数，如果值大于24或小于0，它将检查文本框值，它将提示警报。

我已使用警报，您可以使用任何内容进行验证。

我希望它会对你有所帮助。

Answer 3

您可以执行此纯JavaScript解决方案：

<script>
    ob = document.getElementById('f');
    ob.onblur = function(){

      if (ob.value*1 > ob.max*1 || ob.value*1 < ob.min*1){
        ob.value = 24
      }
    }
  </script>

您在此处为字段id。您可以将它包含在一个函数中，以便在许多字段中使用它。

这是demo

手动输入值时不会考虑Max属性

3 个答案: