有范围限制的数字输入框

Question

我知道您可以使用<input type="number"> 将文本框限制为仅输入整数。但是，我想知道是否也有可能限制范围？限制因素是不使用 javascript 函数在每个 keyup 上检查它。这似乎有点沉重和不必要。我认为 HTML5 会内置一些东西来处理这种边缘情况，但我找不到任何东西。

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

我目前有一个选项选择下拉菜单，其中包含整数和半数，但这并没有提供我正在寻找的详细程度。

Answer 1

正如我在前面的 cmets 中提到的......这里没有任何 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);
    });
});

基本上，在更改事件触发后，我们会进行快速检查以确保值在准则范围内，如果不是，则强制它们回到范围内。

Answer 2

这是一个简单的解决方案，用于使用大多数浏览器支持的HTML5 constraint validation API 检查输入是否为包含在给定范围内的整数：

<label for="n">Enter integer number 1&le;n&le;10</label>
<input type="number" min="1" max="10" step="1" id="n" oninput="(validity.valid)||(value='');">

根据validity states rangeOverflow、rangeUnderflow、stepMismatch 验证和自动更正输入：

<label for="numberSize">Enter integral number 1&le;n&le;10</label>
<input type="number" min="1" max="10" id="numberSize" oninput="(!validity.rangeOverflow||(value=10)) && (!validity.rangeUnderflow||(value=1)) &&
(!validity.stepMismatch||(value=parseInt(this.value)));">

这将发送

• 所有输入>最大到最大
• 输入

并截断十进制值。

Answer 3

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

step 有助于限制最小数量粒度。

Answer 4

在我看来，数字的 HTML 表单元素设计得很糟糕。它只需要整数，所以如果你想要一个零开头或两个零（在 24 小时制的情况下），这是不可能的。其他缺点是在字段中输入时对输入没有限制，因此您可以添加字母、符号等或完全忽略任何 HTML 定义的数字范围，这几乎无法达到目的。

另一方面，文本的 HTML 表单元素允许我们限制字符数（最大长度），我在下面的示例中已经这样做了。 JS 首先将输入限制为仅数字，然后针对类名而不是所有输入元素，因此可以在需要的时间和地点指定范围。 如果输入超出指定范围，我没有设置一个数字，而是选择完全删除该字段，因为这对用户来说会更明显，他们犯了错误并且不那么令人生气，因为设置特定值不太可能等于他们心目中的价值。

与 jQuery 3.4.1 结合使用

JSFiddle 链接： https://jsfiddle.net/u2smwbgL/1/

HTML

<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>

Javascript

// 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 = '';
}
});

CSS

.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 = '';
}
});