输入字段 - 限制为一位[关闭]答案

【问题标题】：Input field - Restrict to One digit [closed]输入字段 - 限制为一位[关闭]
【发布时间】：2017-06-23 09:39:14
【问题描述】：

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

编辑：这个solution 解决了大部分问题，但不将输入限制为数字。

【问题讨论】：

[0] [1] [9] [5] [3] [5] 这就是我想要的结果
您能否提供您的代码，到目前为止您有什么，您有什么想法。另请查看stackoverflow.com/help/how-to-ask
检查解决方案：stackoverflow.com/a/52176432/6719426

标签： css html

【解决方案1】：

使用最大长度和模式只允许一个数字

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

【讨论】：

将类型设置为文本的唯一小问题是也可以使用字母和符号。
是的，你是对的，我做了一点改动，感谢评论；D
谢谢你们的帮助..
仅供参考，maxlength 不适用于输入类型编号。它仅适用于字符串和其他输入。

【解决方案2】：

您可以使用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" />

【讨论】：

【解决方案3】：

我会使用数字输入类型，并使用最大值和最小值。所以这应该有效：

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

【讨论】：

【解决方案4】：

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

【讨论】：

将类型设置为文本的唯一小问题是也可以使用字母和符号。