Question

我有这个简单的HTML：

<input type="text" 
       placeholder="onlynumbers" 
       name="onlynumbers" 
       pattern="\d{1,5}"  
       maxlength="5">

我需要将字符数限制为5.它有效。但我仍然可以键入其他字符而不是数字。我尝试了各种模式，例如：

pattern = "[0-9]"

但是仍然可以键入除数字之外的其他字符。

如果我将type属性更改为number，则输入字段中只接受数字，但maxlength属性不起作用。我可以输入任意数量的数字。我听说这是Chrome中的一个错误。这是问题吗？

是否有跨浏览器方式来满足这些要求：

输入字段（文本或数字，无关紧要），仅接受数字且不允许用户输入超过5位数。

Answer 1

使用max代替maxlength input type="number"。例如，要指定最大长度为5位数，请使用

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

Answer 2

<input type="text" name="country_code" pattern="[0-9]+" title="please enter number only" required="required">

Answer 3

为什么不使用数字输入类型？

＆＃13;

<input type="number" name="onluNumbers" min="1" max="99999">

＆＃13;

Answer 4

您可以使用以下jQuery代码检查regex（对于不支持type = number输入模式的旧浏览器）

＆＃13;

$(function(){
  $("input[name='onlynumbers']").on('input', function (e) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="onlynumbers" name="onlynumbers"   maxlength="5">

＆＃13;

Answer 5

使用此代码片段将输入限制为仅5位数，并在JavaScript的帮助下限制为字母使事情变得更容易而不是JQuery

＆＃13;

function isNumber(evt)
		 {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true; }

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Restrict Number</title>
	<script src="number.js"></script>
</head>
<body>
<form>
	Number:<input type="text" maxlength="5" onkeypress=" return isNumber(event)"/>
</form>
</body>
</html>

＆＃13;

html模式只接受数字

5 个答案: