输入字段 - 限制为一位数

时间:2017-02-06 12:32:44

标签: css html5

enter image description here

我想使用输入字段重新创建上面显示的设计。但是,用户应该只能输入每个框一个数字。如何限制用户每个输入框仅输入1位数。请建议。

4 个答案:

答案 0 :(得分:7)

使用maxlength和pattern只允许一个数字



<input type="text" maxlength="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');" />
&#13;
&#13;
&#13;

答案 1 :(得分:3)

您可以使用focusout jquery脚本来检查值是否大于9.

$(document).ready(function() {
  $('input').focusout(function() {
    var max = $(this).val();
    if (max > 9) {
      $(this).val("9");
      alert("Maximum is 9");
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" max="9" Min="0" />
<input type="number" max="9" Min="0" />
<input type="number" max="9" Min="0" />

答案 2 :(得分:2)

我会使用数字输入类型,并使用max和min。所以这应该有效:

<input type="number" min="0" max="9" step="1">

答案 3 :(得分:1)

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
		<form>
			<input type="number" name="abc" min="0" max="9">
		</form>
</body>
</html>