javascript - 如何限制 html 数字输入(实时)中允许的数字数量?

标签 javascript html input numbers

基本上,我的页面上有一个数字输入字段,我希望用户只能在该字段中插入 4 数字。我知道我可以做这样的事情:

<input type="number" max="9999">

但是只有当我按下时,浏览器才会检查输入是否正确 “提交”按钮。我想要做的是:假设用户在框中键入“1234”,然后他尝试键入“1”或任何其他数字。我希望他不能那样做。基本上,当他一直按任何按钮/字母时,我希望它们不会出现在框中。

我怎样才能做到这一点?

最佳答案

var numberInput = document.getElementById('a');

numberInput.onkeypress = function(){
  console.log(this.value.length)
  if(this.value.length>3)
    return false
}
<input id="a" type="number">

为了使其通用化,使用下面的代码

var inputs = document.querySelectorAll('.restrictLength');

for( i  in inputs){
   inputs[i].onkeypress = function(){
         console.log(this.id,this.value.length,this.getAttribute('data-restrict-to'));
         if(this.value.length>Number(this.getAttribute('data-restrict-to'))-1)
           return false
}

}
<input id="a" class="restrictLength" type="number" data-restrict-to="4"> restrict to 4
<br/>
<br/>
<input id="b" class="restrictLength" type="number" data-restrict-to="2"> restrict to 2

关于javascript - 如何限制 html 数字输入(实时)中允许的数字数量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31624902/

相关文章:

javascript - 在javascript中创建数组的多个副本

html - 导航菜单项在悬停时移动

javascript - IE 的 JavaScript 问题

用于在 Chrome 中设置 HTML5 日期输入日历样式的 CSS

javascript - 使用 jquery 获取选中单选按钮的值

javascript - 使用咖啡 CLI,我如何将变量分配给所需的文件?

javascript - 获取自动填充输入的值 - Jquery

javascript - 将 Firebase 可观察到的 Angular 映射到模板

html - 清除 :both not affecting columns correctly

jsf - 检索没有托管 bean 属性的 JSF 输入字段的值