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

Answer 1

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.

Answer 2

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