Number keyboard issue in Safari for input with type="number"

We recently stumble on a fairly known issue with Safari browsers on IOS when it comes to their <input type="number" /> handling. Basically, when we set the type to "number", we don't want the default keyboard to show on our mobile devices. We want the number keyboard to show. In this example, we will show how to fix this issue.

Problem

Below code snippet will show how our input tag looks like when it is not working. If you are reading this article, yours might look something similar.

<input type="number" value={someValue} onChange={onSomeValueChange} />

This works fine, however, on Safari browsers on IOS, it will still show the default keyboard with letters and everything.

Solution

In order to fix the issue, we will use the attribute pattern and provide a regex.

<input
  type="number"
  value={someValue}
  onChange={onSomeValueChange}
  pattern="[0-9]*"
/>

And now, the keyboard will only show numbers on IOS.

Outro

With this short post, I hope I can help out anyone that are facing this, fairly small, but annoying issue. Thanks for reading, and have a great day!

All the best,