Input field - Restrict to One digit

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.

[0] [1] [9] [5] [3] [5] This is how I want the result to look like — Sijo Jose, Feb 06 '17 at 12:33
Can you please provide your code, what do you have so far, and what ideas do you have. Also please check http://stackoverflow.com/help/how-to-ask — Armin, Feb 06 '17 at 12:36
Check solution for this: https://stackoverflow.com/a/52176432/6719426 — Jagraj Singh, Sep 05 '18 at 03:07

Pablo Salcedo T. · Answer 1 · 2017-02-06T12:49:12.200

24

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,'');" />

edited Feb 06 '17 at 12:49

answered Feb 06 '17 at 12:41

Pablo Salcedo T.

874
1
16
27

1

The only small issue with having the type set as text is that letters and symbols can also be used. – jbutler483 Feb 06 '17 at 12:46
yes you were right i made a little change, thx for the comment ;D – Pablo Salcedo T. Feb 06 '17 at 12:49
Thank you for your help guys.. – Sijo Jose Mar 16 '17 at 07:29
4

Just FYI, maxlength does NOT work on input type number. It's only for strings and other inputs. – Schw2iizer Aug 17 '18 at 04:55

score 4 · Answer 2 · answered Feb 06 '17 at 12:39

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" />

score 3 · Answer 3 · answered Feb 06 '17 at 12:42

3

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">

answered Feb 06 '17 at 12:42

Mike Harrison

1,020
2
15
42

Chirag Gojaria · Answer 4 · 2017-02-06T12:56:14.723

0

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

edited Feb 06 '17 at 12:56

answered Feb 06 '17 at 12:39

Chirag Gojaria

55
1
10

The only small issue with having the type set as text is that letters and symbols can also be used. – jbutler483 Feb 06 '17 at 12:46

Input field - Restrict to One digit

4 Answers4