如何限制html数字输入（live）中允许的数字数量？答案

【问题标题】：How to restrict the amount of numbers allowed in the html number input (live)?如何限制html数字输入（live）中允许的数字数量？
【发布时间】：2015-07-25 09:12:39
【问题描述】：

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

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

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

我怎样才能做到这一点？

【问题讨论】：

不幸的是，maxlength 仅适用于 type="text"。试试看here。
@initialxy 很有趣。我不知道。在那种情况下，我可能会使用文本并且不会打扰数字，因为它不能限制输入。
@SebastianNette 根据输入类型查看支持属性的完整列表：w3.org/TR/html5/forms.html#concept-input-apply

标签： javascript html input numbers

【解决方案1】：

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

numberInput.onkeypress = function(){
  console.log(this.value.length)
  if(this.value.length>3)
    return false
}

&lt;input id="a" type="number"&gt;

为了使其通用化，请使用以下代码

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

【讨论】：

如需通过不使用type=number将字段限制为仅数字，请访问Restrict to Number
最好改为监听输入事件，然后将超出限制的所有内容都剪掉。例如，复制和粘贴或在输入处使用这些箭头不受影响。
@SebastianNette 有效点但请参阅问题Let's say that the user types "1234" in the box, and after that he tries to type "1" or any other number. I want him to not be able to do that
所以如果 OP 想要这样的限制，OP 可以添加额外的代码来使用像 change 等事件，事件 input 也不是广泛支持的事件
这里e 代表exponential 号码，所以2e10 可以作为一个号码

【解决方案2】：

var specialKeys = new Array();
        specialKeys.push(8); //Backspace
        $(function () {
            $("#a").bind("keypress", function (e) {
                if(this.value.length>3){ return false}
                var keyCode = e.which ? e.which : e.keyCode
                var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1);

                return ret;
            });
            $("#a").bind("paste", function (e) {
                return false;
            });
            $("#a").bind("drop", function (e) {
                return false;
            });
        });

    <input id="a" type="number">

【讨论】：

谢谢，但我不喜欢使用 jQuery，因为我还是 JS 的初学者。

【解决方案3】：

    <input type="number" id="userNumber">
        <input type="submit" id="numberSubmit" onclick="CheckValid()">
        <label id="warningMessage"></label>
        <script>
            function CheckValid(){
            var number = document.getElementById("userNumber").value;
            if(isNaN(number) || number.length != 4)
            {
                document.getElementById("warningMessage").innerHTML = "Invalid";
            }   
            else{
                document.getElementById("warningMessage").innerHTML = "Valid";
            }
            }
        </script>

【讨论】：

谢谢，但这只会在我单击框时检查输入是否有效。

【解决方案4】：

甜蜜而简单。

<input id="a" type="text" maxLength = "4" 
onkeypress='return event.charCode > 48 && event.charCode < 57'>

注意：基于社区 wiki 的解决方案：HTML Text Input allow only Numeric input

【讨论】：

AFAIK 这删除了移动支持；一些移动浏览器在遇到type="number" 时会弹出数字键盘而不是键盘，这会阻止这种情况。

【解决方案5】：

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

【讨论】：

不幸的是，maxlength 仅适用于 type="text"。试试看here。