Question

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

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

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

Answer 1

您需要处理较低级别的句柄输入并执行自己的检查。为了防止用户键入大于最大值的值，您可以处理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>的自己的用户界面，这就是使用它的原因。该界面并不是为了防止用户键入太大的值，而是检测它们并报告它们以便用户可以纠正它们。在尝试对此进行实质性修改之前，请考虑潜在的混淆。如果您确实添加了防止outfe-ranfe值的代码，浏览器将不会显示诊断消息（例如“Number必须小于或等于50”），因为默认情况下它们支持<input type=number>，所以您的JavaScript代码可能应该发出自己的诊断信息。

Answer 2

阅读input element文档。

或者：

阅读HTML5 Constraint Validation

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

然后阅读Regex numeric range matching

Answer 3

试试这个：

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

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

    $(this).val('')
}

}）

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

Answer 4

将值设置为min ...

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

限制用户在html输入中放置值（类型=数字）

4 个答案: