对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?


当前回答

另一种选择是为任何具有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>

其他回答

与type="number"一样,指定max而不是maxlength属性,这是可能的最大数目。如果是4位数,最大值应该是9999,5位数是99999,以此类推。

另外,如果你想确保它是一个正数,你可以设置min="0",以确保它是正数。

如果有人在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来改变你可以输入的数字数量)。我希望这能帮助到那些正在为这个问题而挣扎的人。如果你想了解切片方法的功能,可以点击这里

你可以将它指定为文本,但要添加只匹配数字的pettern:

<input type="text" pattern="\d*" maxlength="2">

它非常完美,而且在移动设备上(在iOS 8和Android上进行了测试),数字键盘也会弹出。

假设您希望允许的最大值为1000—可以是键入的,也可以是使用旋转器的。

你可以使用以下方法限制微调器值: Type ="number" min="0" max="1000"

并且用javascript限制键盘输入的内容: onkeyup =“如果(方法(this.value) > 1000){。值= 1000;返回错误;}”

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。

Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。