输入框 - 限制为一个数字

Question

输入框 - 限制为一个数字

csshtml

13

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

编辑：这个解决方案解决了大部分问题，但无法限制输入为数字。

- Sijo Jose

[0] [1] [9] [5] [3] [5] 这就是我希望结果看起来的样子 - Sijo Jose

你能否提供你的代码，目前为止你拥有什么，以及你有哪些想法？另外，请检查http://stackoverflow.com/help/how-to-ask。 - Armin

请查看此解决方案：https://dev59.com/QVgR5IYBdhLWcg3wH6Zr#52176432 - Jagraj Singh

4个回答

4

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

- jbutler483

3

我会使用数字输入类型，并使用最大值和最小值。因此，这应该可以工作：

```html ```

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

- Mike Harrison

0

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

- Chirag Gojaria

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pablo Salcedo T. · Accepted Answer

使用 maxlength 和 pattern 属性，使输入框只能输入一个数字。

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