//对于Angular，我添加了如下代码片段。 < div ng-app = " " > < >形式 输入数字:<input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0"> > < /形式 <h1>输入:{{number}}</h1> < / div >

如果你使用"onkeypress"事件，那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求，不允许用户进入特定的限制后，看看这段代码，并尝试一次。

梅考·莫拉的回答是一个好的开始。 然而，他的解决方案意味着当您输入第二个数字时，所有字段的编辑都会停止。因此，您不能更改值或删除任何字符。

下面的代码停在2，但允许继续编辑;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

如果有人在React中挣扎，我发现最简单的解决方案是使用onChange函数，像这样:

    const [amount, setAmount] = useState("");
    
   return(
    <input onChange={(e) => {
    setAmount(e.target.value);
    if (e.target.value.length > 4) {
         setAmount(e.target.value.slice(0, 4));
    }
    }} value={amount}/>)

所以这基本上做的是，它获取输入的值，如果输入值长度大于4，它就会切片它之后的所有数字，所以你只得到前4个数字(当然，你可以通过改变代码中的所有4来改变你可以输入的数字数量)。我希望这能帮助到那些正在为这个问题而挣扎的人。如果你想了解切片方法的功能，可以点击这里

另一种选择是为任何具有maxlength属性的东西添加一个侦听器，并将切片值添加到其中。假设用户不想在与输入相关的每个事件中使用函数。下面是一个代码片段。忽略CSS和HTML代码，JavaScript才是最重要的。

// Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // Global Listener for anything with an maxlength attribute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength); label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 } <label for="test_input">Text Input</label> <input id="test_input" type="text" maxlength="5"/> <span>set to 5 maxlength</span> <br> <label for="test_input">Number Input</label> <input id="test_input" type="number" min="0" max="99" maxlength="2"/> <span>set to 2 maxlength, min 0 and max 99</span>

我使用一个简单的解决方案的所有输入(与jQuery):

$(document).on('input', ':input[type="number"][maxlength]', function () {
    if (this.value.length > this.maxLength) {
        this.value = this.value.slice(0, this.maxLength); 
    }
});

代码选择maxlength定义的所有输入类型="number"元素。

您可以添加一个max属性，该属性将指定您可以插入的最大数字

<input type="number" max="999" />

如果你同时添加Max和min值，你可以指定允许值的范围:

<input type="number" min="1" max="999" />

以上仍然不会阻止用户手动输入指定范围之外的值。相反，他会看到一个弹出窗口，告诉他在提交表单时输入一个范围内的值，如下面的截图所示: