html5 input type number with regex pattern

Question

I'm trying to get regex pattern in input type number to show only numbers and forward slash. I tried something like this.

<input type="number" pattern="[0-9\/]*">

But getting only 0-9 number pad. How can I show 0-9 number pad as well as forward slash "/" in regex.

it is not semantically correct to use an input with a number type and requesting a non-number value. — Gaël Barbin
– Gaël Barbin, Commented Apr 13, 2015 at 10:28
I did not understand you were looking for to select a mobile virtual keyboard — Gaël Barbin
– Gaël Barbin, Commented Apr 13, 2015 at 11:09

test · Accepted Answer · 2015-04-13 10:50:26Z

2

You could use input type "text" for only the validation purpose.

<input type="text" pattern="[0-9\/]*" >

You can consider the "tel" input type, for a simpler keybord layout containing the slash on a mobile device

<input type="tel" pattern="[0-9\/]*">

answered Apr 13, 2015 at 10:50

test

864 bronze badges

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

2 Comments

UI_Dev Over a year ago

It gives some symbols also..How can I restrict those and allow only forward slash?

test Over a year ago

In my opinion that is not possible, your phone has some default keyboards you can chose from through the html5 tag, thats it. I think if you want a more specific phonelayout thats only possible with a native app. (If it is possible)

Wiktor Stribiżew · Accepted Answer · 2015-04-13 10:31:50Z

0

You should change the input type to text:

<input type="text" pattern="[0-9\/]*" name="text_with_numbers">

See more information here.

answered Apr 13, 2015 at 10:31

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

1 Comment

Wiktor Stribiżew Over a year ago

It does not matter if you give text or not, it won't users submit junk, only what is allowed.

Collectives™ on Stack Overflow

html5 input type number with regex pattern

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related