HTML5：使用键盘输入时，“数字”类型的输入字段仍将接受高于“最大值”的值

Question

大家好，这里需要一些帮助。我想通过在输入字段中添加 max 属性来限制输入字段中输入的数字。在我使用键盘输入数据之前，我对此没有任何问题。似乎 max 属性没有过滤来自键盘的输入。

例如

<input type="number" max="5" />

我不能使用向上和向下箭头，直到

6

，但是当我使用键盘手动输入

6

时，它会接受它。我该如何预防？谢谢你

Answer 1

您需要使用 JavaScript 来完成此操作。这不会让用户输入高于5的数字：

 <input type="number" max="5" onkeyup="if(this.value > 5) this.value = null;">

另一种可能的解决方案是通过将上面代码中的

onkeyup=".."

事件替换为

onkeydown="return false"

来完全阻止键盘输入。

Answer 2

在我使用键盘在其上输入数据之前，没有任何问题。 似乎 max 属性没有过滤来自的输入 键盘

这就是 HTML5 验证/约束的工作原理。但是，当表单提交时，它就会失效。或者，您可以自己验证。为了验证自己，您需要连接 Javascript 并调用输入元素上的

checkValidity()

。

约束API的

checkValidity()

将检查元素的有效性状态，并返回输入元素是否有效的状态。这还将在输入上设置

validity

对象，以便您可以查询更多详细信息。

参考：https://html.spec.whatwg.org/multipage/forms.html#constraints和https://html.spec.whatwg.org/multipage/forms.html#form-submission-algorithm

您还可以使用 CSS 中的

:invalid

选择器来突出显示无效输入。

示例片段：

var input = document.getElementById('test'), 
    result = document.getElementById('result');
  
input.addEventListener('blur', validate);

function validate(e) {
  var isValid = e.target.checkValidity();
  result.textContent = 'isValid = ' + isValid;
  if (! isValid) {
    console.log(e.target.validity);
  }
}

input[type=number]:invalid {
  border: 2px solid red;
  outline: none;
}

<label>Enter value and press tab: </label><br/>
<input id="test" type="number" min="1" max="10" />
<hr/>
<p id="result"></p>

Answer 3

您可以使用

javascript

将最大输入值限制为 5。

HTML

使用

oninput

作为事件处理程序

<input type="number" max="5" oninput="checkLength(this)" />

JS

function checkLength(elem) {
  // checking if iput value is more than 5
  if (elem.value > 5) {
    alert('Max value is 5')
    elem.value = ''; // emptying the input box
  }
}

演示

Answer 4

解决两个问题的效用函数

问题1：限制用户输入最多n位

为此，请使用 n 个 9 作为最大参数。例如，如果您想限制用户输入 4 位数字，则最大参数值为 9999。

问题2：将用户输入限制在最大值

这很直观。例如，如果您希望将用户输入限制为最大 100，则最大参数值为 100。

function getMaxInteger(value, max) {
    if(!value) return;
    if( parseInt(value) <= max ) {
        return value;
    }
    return getMaxInteger(value?.substr(0, value?.length-1), max);
}

function maxInt(value, max) {
    return getMaxInteger(value?.replace(/\D/,''), max);
}

在输入更改处理程序上使用此 maxInt 方法

Angular的

ngModelChange

React的onChange

v-on：更改或观看

Vue

Answer 5

var input = document.getElementById('test'), 
    result = document.getElementById('result');
  
input.addEventListener('blur', validate);

function validate(e) {
  var isValid = e.target.checkValidity();
  result.textContent = 'isValid = ' + isValid;
  if (! isValid) {
          e.target.validity.rangeOverflow = false;
          e.target.validity.valid = true;
    console.log(e.target.validity);
  }
}

input[type=number]:invalid {
  border: 2px solid red;
  outline: none;
}

<label>Enter value and press tab: </label><br/>
<input id="test" type="number" min="1" max="10" />
<hr/>
<p id="result"></p>

Answer 6

onkeyup="if(this.value > <?=$remaining?>) this.value = null; else if(this.value < 1) this.value = null;"