限制用户在html输入中输入范围内的值(类型=数字）

Restrict user to put value in range in html input (type = number)

本文关键字：输入 类型 数字 范围内 用户 html      更新时间：2023-09-26

如何阻止用户在html输入（type=number）中添加大于最大值且小于最小值的数字

<input id="ageRange" type="number" min=20 max= 50 maxlength=2></input>

我尝试了一个javascript代码，但它在我们添加值后进行了更改，然后更改了值。有没有什么方法可以阻止用户将值放在范围内，或者当我们用程序更改值时，输入单元格中没有闪烁？

您需要在低级别处理输入并执行自己的检查。为了防止用户键入大于最大值的值，您可以处理keypress事件，然后检查输入字符以及它是否会使值过大：

<input id="ageRange" type="number" min=20 max= 50 maxlength=2>
<script>
document.getElementById('ageRange').onkeypress =
  function (e) {
    var ev = e || window.event;
    if(ev.charCode < 48 || ev.charCode > 57) {
      return false; // not a digit
    } else if(this.value * 10 + ev.charCode - 48 > this.max) {
       return false;
    } else {
       return true;
    }
  }
</script>

这样可以防止用户通过粘贴插入更大的值。

为了防止用户删除字符，从而使值变得太小，您需要处理rubout键，由于键盘的差异，这个键的问题更大。但它的可用性很差。假设用户键入30，然后意识到他想要键入40。防止将值更改为太小的代码将阻止删除任何一个数字！

浏览器应该有自己的<input type=number>用户界面，这就是使用它的原因。该界面不是为了防止用户键入过大的值，而是为了检测并报告这些值，以便用户可以更正它们。在尝试对其进行实质性修改之前，请考虑潜在的混淆。如果您添加了防止超出范围值的代码，浏览器将不会显示诊断消息（例如"Number must be less or equal to 50"），因为如果它们支持<input type=number>，则默认情况下会显示诊断消息，因此您的JavaScript代码可能应该发出自己的诊断消息。

阅读输入元素文档。

或者：

阅读HTML5约束验证

<input id="age" pattern="[0-9]" value="9" />
<script>
    document.getElementById('age').validity.patternMismatch;
</script>

然后读取与匹配的Regex数值范围

试试这个：

var max = 100;
$('input').keyup(function(){
var inputValue = $(this).val();
if(inputValue > max){
    alert('greater!');
    $(this).val('')
}

})

这是jsfiddle：http://jsfiddle.net/h07Lc0Ld/1/

将值设置为最小…

<form>
<input id="ageRange" type="number" min="20" max="50" value="20"></input>
</form>
相关文章：