Javascript 带范围限制的仅数字输入框

我知道您可以使用

将文本框限制为仅整数输入。然而，我想知道是否也有可能限制这个范围？限制因素是没有使用javascript函数在每个

键上检查它。这似乎有点沉重，没有必要。我想HTML5会内置一些东西来处理这个边缘案例，但我一直没有找到任何东西

例如，我有一个重复数据消除比率的输入框，我想限制用户输入3到7之间的数字（整数或浮点）

我有一个选项选择下拉列表目前与整数和一半的数字，但这并没有提供详细程度，我正在寻找
 

<input type="number" min="3" max="7" step="0.01"></input>


步骤
有助于限制最小数字粒度。
正如我在前面的评论中提到的那样。。。这里没有什么东西是HTML的（你会认为应该有）。但是既然您的问题中包含了Javascript和jQuery，我将提出这个简单而轻松的解决方案

假设这个HTML

<form>
  <input type="number" min="3" max="7" step="0.5"></input>
</form>



然后我们可以使用这个脚本来处理我们的需求

$( document ).ready(function() {
    $('input').change(function() {
      var n = $('input').val();
      if (n < 3)
        $('input').val(3);
      if (n > 7)
        $('input').val(7);
    });
});

$（文档）.ready（函数（）{
$（'input'）.change（函数（）{
var n=$（'input'）.val（）；
if（n<3）
$（'input'）.val（3）；
如果（n>7）
$（'input'）.val（7）；
});
});

基本上，在变更事件触发后，我们会进行快速检查，以确保这些值在指导原则范围内，如果不在指导原则范围内，则强制它们回到范围内
 以下是一个简单的解决方案，用于使用大多数浏览器支持的检查输入是否为给定范围内的整数：


输入整数1&le；n&le；10
我认为数字的HTML表单元素设计得很糟糕。它只需要整数，所以如果你想要一个零在开始或两个零（在24小时制的情况下），这是不可能的。其他缺点是在字段中键入时对输入没有限制，因此您可以添加字母、符号等，或者完全忽略任何HTML定义的数字范围，这在很大程度上违背了输入的目的

另一方面，文本的HTML表单元素允许我们限制字符数（maxlength），我在下面的示例中已经这样做了。
JS首先将输入限制为仅数字，然后将目标定为类名，而不是所有输入元素，因此可以在需要时和需要时指定范围。
如果输入超出指定的范围，我选择完全删除该字段，而不是设置一个数字，因为这会让用户更清楚地意识到他们犯了一个错误，也不会那么恼火，因为设置一个特定的值不太可能等同于他们心目中的值

与jQuery 3.4.1一起使用

jsiddle链接：

HTML

CSS

实现了这一点，并在右侧使用向上和向下箭头时限制该值。但是，它并不限制用户手动键入他们想要的任何值。我必须同意OP。这并不真正限制输入，除非用户实际使用向上/向下箭头来填充值。我认为当作为表单的一部分使用时，除非值在正确的范围内，否则提交操作将被禁止。我一直在使用类似引导的方法来突出显示无效字段，因此用户在表单验证之前键入内容的边缘情况从来都不是一个问题。你可能会认为HTML5内置了一些东西。。。但遗憾的是，我什么也没找到。我相信您必须使用其中一个Javascript库，或者自己编写一个快速验证脚本。我不一定要用keyUp。。。而不是onBlur，或者在提交表单之前进行验证。我的两分钱。
<h1>Set Hours &#38; Minutes</h1>
<div class='left'>
<label>&nbsp;&nbsp;Hours
<input type="text" class='hour' maxlength="2" />
</label>
</div>

<div class='break'></div>

<div class='left'>
<label>&nbsp;&nbsp;Minutes
<input type="text" class='minute' maxlength="2" />
</label>
</div>

// Filter Inputs
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop",function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
};
}(jQuery));

// Hours & Minutes - Only Numbers
$(".hour,.minute").inputFilter(function(value) {
return /^[0-9]*$/i.test(value);
});

// Hours
$('.hour').on('input', function () {   
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value > 23)
this.value = '';
}
});

// Minutes
$('.minute').on('input', function () {   
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value > 59)
this.value = '';
}
});

.left {position:relative; float:left; width:100%;}
.break {position:relative; float:left; width:100%; height:20px;}
.minute,.hour {position:relative; float:left; width:50px; margin-left:20px; text-align:center;}
$('.minute').on('input', function () {   
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value > 59)
this.value = '';
}
});