Input field - Restrict to One digit [closed]

Question

I want to re-create this above shown design using an Input field. However, the user should be able to enter only one numeric digit per box. How can I restrict the user to enter only 1 digit per input box. Please suggest.

Edit: this solution solves most of the problem, but does not restrict the input to digits.

Answer 1

Use the maxlength and the pattern to allow only one number

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

Answer 2

I would use the number input type, and use max and min. So this should work:

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

Answer 3

You could use the focusout jquery script to check the value isn't greater than 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" />