maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
当前回答
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="4" />
其他回答
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">
演示 - JSFIDDLE
许多人张贴的onKeyDown()事件根本不工作,即你不能删除一旦你达到限制。因此,使用onKeyPress()而不是onKeyDown(),它工作得很好。
下面是工作代码:
用户将不允许输入超过4位数字 < br > <input type="number" pattern="/^-?\d+\.? "\d*$/" onKeyPress="if(this.value.length==4) return false;"/>
我可以用这个存档。
<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">
这段代码对我来说运行得很好。
在type="number"的输入中,可以添加以下属性:
oninput="constrainUserInput(this.id)"
完整的输入是这样的:
<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>
注意:必须为这个方法分配输入和ID
然后你可以添加以下JavaScript到你的HTML,它基本上替换任何字符超过你的maxlength属性用一个空引号(本质上删除它们):
function constrainUserInput(id) {
let input = document.getElementById(id);
let value = input.value;
if (value.length > input.maxLength) {
input.value = value.substring(0, input.maxLength);
}
}
我曾经遇到过同样的问题,并根据我的需求找到了这个解决方案。 它可能对某人有帮助。
<input type="number" placeholder="Enter 4 Digits" max="9999" min="0"
onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;"
/>
快乐编码:)