html pattern to only accept numbers

Question

I have this simple html:

<input type="text" 
       placeholder="onlynumbers" 
       name="onlynumbers" 
       pattern="\d{1,5}"  
       maxlength="5">

I need to restrict the number of characters to 5. It works. But I still can type other characters than numbers. I have tried various pattern, for example:

pattern = "[0-9]"

But it is still possible to type other characters than digits.

If I change the type attribute to number, then only digits are accepted in the input field but the maxlength attribute doesn't work. I can enter as many digits as I want. I heard this was a bug in Chrome. Is that the problem?

Is there a cross-browser way to fulfil these requirements:

An input field (text or number, no matters) that only accept digits and doesn't let the user enter more than 5 digits.

`pattern` does not prevent the user from entering other characters. To prevent, you need to use JavaScript. — Tushar, Dec 12 '17 at 09:35
The correct attributes for a number input are min & max. Use `max="99999"` Also the pattern attribute is implicitly a whole string match. So `pattern="[0-9]"` means "only one digit" — Kulvar, Dec 12 '17 at 09:36
Please [**search thoroughly**](/search?q=input+accept+only+numbers) before posting. More on searching [here](/help/searching). — T.J. Crowder, Dec 12 '17 at 09:36

score 30 · Answer 1 · answered Dec 12 '17 at 09:44

30

<input type="text" name="country_code" pattern="[0-9]+" title="please enter number only" required="required">

answered Dec 12 '17 at 09:44

darshan

335
3
11

1

This is the right answer. `type="number"` is for amounts. That's why most browsers display spinner controls. If you're asking for i.e. a house number, it's not an amount, you just expect numbers. – Joris Portfolioris Aug 31 '20 at 14:48
Another use case where type="text" is needed.: the number is an identifier and may start with a "0". – Adam Marsh Dec 20 '20 at 00:39
1

actually better would be use type="tel" as from mozilla docs https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel – Carmine Tambascia Aug 21 '21 at 10:59

score 10 · Answer 2 · answered Dec 12 '17 at 09:36

10

Use max instead of maxlength with input type="number". For example, to specify max length of 5 digits, use

<input type="number" max="99999" />

answered Dec 12 '17 at 09:36

Shreevardhan

12,233
3
36
50

score 3 · Answer 3 · answered Dec 12 '17 at 09:43

You can use the Below jQuery code to check with regex (For old browsers that does not support the type=number input pattern)

$(function(){
  $("input[name='onlynumbers']").on('input', function (e) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="onlynumbers" name="onlynumbers"   maxlength="5">

score 1 · Answer 4 · 2017-12-12T10:21:18.743

Use This Code snippets to restrict input to only 5 digits and restrict to letters with the help of JavaScript make thing easier instead of JQuery

function isNumber(evt)
   {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true; }

<!DOCTYPE html>
<html>
<head>
 <title>Restrict Number</title>
 <script src="number.js"></script>
</head>
<body>
<form>
 Number:<input type="text" maxlength="5" onkeypress=" return isNumber(event)"/>
</form>
</body>
</html>

score -3 · Answer 5 · edited Dec 12 '17 at 12:05

-3

Why not you use number input type?

<input type="number" name="onluNumbers" min="1" max="99999">

edited Dec 12 '17 at 12:05

Jobin

5,610
5
38
53

answered Dec 12 '17 at 09:40

Uzair Nadeem

745
2
8
29

because sometimes you need the output to be string, that means leading zeros are important – Johan Jul 14 '21 at 10:47
@Johan idk about you... but `theInput.value` *does* seem to be a string (retaining all leading zeros too) – somebody Sep 10 '22 at 00:40

html pattern to only accept numbers

5 Answers5

Linked