Question

我正在创建一个程序，要求用户将字符串输入到HTML文本输入框中，但它必须是四个字符。有没有办法为输入设置最大值？你也可以这样做它只能是数字吗？这就是我的意思：

<html>
<head>

</head>
<body>
<h1>Please enter a four digit pin number:</h1>
<input type=text id=pin_number **maxvalue=4**>
/*Maybe you can do it with buttons*/
<table><tr><td><input type="button" value="1>"</td><td><input type="button" value="2>"</td>
<td><input type="button" value="3>"</td></tr><tr><td><input type="button" value="4>"</td><td><input type="button" value="5>"</td>
<td><input type="button" value="6>"</td></tr><tr><td><input type="button" value="7>"</td><td><input type="button" value="8>"</td>
<td><input type="button" value="9>"</td></tr></table>
</body>
</html>

Answer 1

<input type="number" max="9999" min="0" required value="0">

Fiddle

Answer 2

另一种解决方案，使用HTML5 pattern attribute：

<input type='text' pattern='\d\d\d\d' />

Fiddle

同样，我想你想要四位数。 您可以输入任何内容，但点击提交时会出现错误

Answer 3

使用Javascript和这样的正则表达式：

<html>
<head>

<script language="javascript" type="text/javascript">

function pinnotify() {
    var notify = document.getElementById('notify');
    var numberRegex = new RegExp("^[0-9]+$");
    var text = document.getElementById("pin");

    if(numberRegex.test(text.value)){
            notify.innerHTML = '<a style="font-size:1em;">Looks good!</a>';
    }else{
            notify.innerHTML = '<a style="font-size:1em;">Please numbers only.</a>';
    }

    if(text.value.length > 4){
            text.value = text.value.substring(0,4);
    }


}

</script>


</head>
<body>


<h1>Please enter a four digit pin number:</h1>

<form method="post" action="">
<input type="text" name="pin" id="pin" size="32" onkeyup="return pinnotify();"> <span id="notify"></span><br/>
</form>
</body>
</html>

Answer 4

这是我在文本字段中过滤数字和检查最大值的方法。

适用于任何浏览器

JS功能：

function InputReplaceForInt(input, max) {
    if(max > 0 && input.value.length > max) {
        input.value = input.value.substr(0,max);
    }
    input.value = input.value.replace(/[^\d]/g, '');
}

Html代码：

<input name="telephone"  type="text" onkeyup="InputReplaceForInt(this,11)"/>

有没有办法在html文本输入上设置最大值？

4 个答案: