html pattern to only accept numbers [duplicate]

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
– Tushar, Commented Dec 12, 2017 at 9: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
– Kulvar, Commented Dec 12, 2017 at 9:36
Please search thoroughly before posting. More on searching here. — T.J. Crowder
– T.J. Crowder, Commented Dec 12, 2017 at 9:36

darshan · Accepted Answer · 2017-12-12 09:44:35Z

33

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

answered Dec 12, 2017 at 9:44

darshan

3733 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joris Portfolioris Over a year ago

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.

Adam Marsh Over a year ago

Another use case where type="text" is needed.: the number is an identifier and may start with a "0".

Carmine Tambascia Over a year ago

actually better would be use type="tel" as from mozilla docs developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

Shreevardhan · Accepted Answer · 2017-12-12 09:36:53Z

9

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, 2017 at 9:36

Shreevardhan

12.7k3 gold badges39 silver badges53 bronze badges

Comments

Bourbia Brahim · Accepted Answer · 2017-12-12 09:43:52Z

3

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

answered Dec 12, 2017 at 9:43

Bourbia Brahim

14.7k4 gold badges45 silver badges55 bronze badges

Comments

score 1 · Accepted Answer · 2017-12-12 10:21:18Z

1

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>

edited Dec 12, 2017 at 10:21

answered Dec 12, 2017 at 10:12

user8562264

Comments

J-J · Accepted Answer · 2017-12-12 12:05:34Z

-4

Why not you use number input type?

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

edited Dec 12, 2017 at 12:05

J-J

5,9206 gold badges43 silver badges58 bronze badges

answered Dec 12, 2017 at 9:40

Uzair Nadeem

7552 gold badges10 silver badges30 bronze badges

2 Comments

Johan Over a year ago

because sometimes you need the output to be string, that means leading zeros are important

somebody Over a year ago

@Johan idk about you... but theInput.value does seem to be a string (retaining all leading zeros too)

Collectives™ on Stack Overflow

html pattern to only accept numbers [duplicate]

5 Answers 5

3 Comments

Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

2 Comments

Linked

Related