Make HTML5 input type="number" accepting dashes

Question

I want to use the number input type for my HTML form.

Unfortunately it only accepts real numbers, no dashes between.

Is there a way to make the number input accepting numbers like "1234-123456789" ?

Values for number inputs must always be valid floating point numbers and therefor may only contain a single dash (that is, a minus sign) in front of the number. See w3.org/TR/html5/infrastructure.html#valid-floating-point-number — icke
– icke, Commented Jan 20, 2015 at 11:44

metamilo · Accepted Answer · 2015-08-09 00:55:29Z

21

I recently had the same issue. I got around it by using type="tel" instead of type="text" or type="number". By using 'tel' I was able to get a numeric only keyboard on mobile devices and still be able to use my pattern="[0-9\-]+".

Here is the code I used. I hope this is good enough for what you need. They really need to make it so that adding a pattern attribute overrides any built in pattern set by the type attribute.

<input id='zipcode' name='zipcode' type='tel' pattern="[0-9\-]+" placeholder='Zip-code'>

Of course this will only work if all you want is dashes and possibly parentheses.

edited Aug 9, 2015 at 0:55

answered Aug 9, 2015 at 0:47

metamilo

2232 silver badges5 bronze badges

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

5 Comments

scuds Over a year ago

Won't this cause issues with accessibility? Will screen readers tell people to enter a phone number?

metamilo Over a year ago

@Carlin: Good point. This very well might cause an issue with screen readers. As such it isn't a perfect solution, but it's up to the developer as to whether that is an acceptable sacrifice.

Kyle Baker Over a year ago

Thanks for this, clever little hack. A note: This also seems to allow '/', another character not allowed in number inputs. Using this to get date inputs that use mobile number keypad.

Vladimir Brasil Over a year ago

I am sorry for using this comment only to thank you very much for this clever solution. Thank you very much.

gtamborero Over a year ago

Works for Android but not for iPhone (no middle dash button appears)

Russell Munro · Accepted Answer · 2021-05-10 07:24:54Z

5

inputmode="numeric" is your new best friend..

https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#numeric

answered May 10, 2021 at 7:24

Russell Munro

5776 silver badges11 bronze badges

1 Comment

Pro Backup Over a year ago

New since 2019 for major browser. Since 2012 in mobile Firefox. Still (2023) not supported in desktop Safari. caniuse.com/input-inputmode

icke · Accepted Answer · 2015-01-20 11:50:32Z

3

You can use a regular expression against which the value will be validated. Simply put it in the pattern attribute. You also have to change your input's type to text in order to use that.

 <input type="text" pattern="[0-9]+([-\,][0-9]+)?" name="my-num"
               title="The number input must start with a number and use either dash or a comma."/>

edited Jan 20, 2015 at 11:50

icke

1,5981 gold badge19 silver badges31 bronze badges

answered Jan 20, 2015 at 11:23

Dhru 'soni

1,0687 silver badges24 bronze badges

1 Comment

alexwenzel Over a year ago

Already tried that. But then I loose the nice number keyboard on mobile devices.

Collectives™ on Stack Overflow

Make HTML5 input type="number" accepting dashes

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related