Javascript 限制用户将值放入html输入的范围（类型=编号）

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

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

请阅读文档

或者：

读一读

document.getElementById（'age'）.validity.pattern不匹配；

然后读取

将值设置为最小

<form>
<input id="ageRange" type="number" min="20" max="50" value="20"></input>
</form>

试试这个：

var max = 100;
$('input').keyup(function(){

var inputValue = $(this).val();
if(inputValue > max){
    alert('greater!');

    $(this).val('')
}

})

---

下面是JSFIDLE:

您需要在较低级别处理输入并执行自己的检查。为了防止用户键入大于最大值的值，您可以处理

按键

事件，然后检查输入字符以及是否会使值过大：

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

document.getElementById（'Agrange'）.onkeypress=
职能（e）{
var ev=e | | window.event；
如果（ev.charCode<48 | | ev.charCode>57）{
返回false；//不是数字
}否则如果（this.value*10+ev.charCode-48>this.max）{
返回false；
}否则{
返回true；
}
}

这会阻止用户通过粘贴插入更大的值

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

---

浏览器应该有自己的

用户界面，这就是使用它的原因。该界面不是为了防止用户键入过大的值，而是为了检测并报告这些值，以便用户能够更正它们。在试图实质性修改之前，考虑一下潜在的混淆。如果您添加了防止超出范围值的代码，浏览器将不会显示诊断消息（例如，“数字必须小于或等于50”），因为默认情况下，如果浏览器支持

，则浏览器不会显示诊断消息，因此您的JavaScript代码可能会发出自己的诊断。

是的，

min

和

max

，就像您已经在做的那样。他们可以填写一个错误的值，元素现在就会知道它是错误的，你可以使用CSS向用户显示它，并使表单在用户确定其值之前不会提交。看看你尝试了什么JavaScript代码？JSFIDLE没有

，代码会清除用户输入，这并不是什么意思，或者良好的可用性。你是对的，你可以在if语句中进行更改。现在，并非所有浏览器都支持“类型编号”。

var max = 100;
$('input').keyup(function(){

var inputValue = $(this).val();
if(inputValue > max){
    alert('greater!');

    $(this).val('')
}

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