输入字段 - 限制为一位数

Question

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

Answer 1

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

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

Answer 2

您可以使用focusoutjquery 脚本检查该值是否不大于 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" />