How to show a number-friendly virtual keyboard when clicking on an input HTML element on mobile devices?
Tags: html
Published: 2022-12-12 05:19:34

---
  title: How to show a number-friendly virtual keyboard when clicking on an input HTML element on mobile devices?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 10:49:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/show-number-friendly-virtual-keyboard-when-clicking-input-html-element-on-webpage-mobile-device-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_75211ccc3c.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/show-number-friendly-virtual-keyboard-when-clicking-input-html-element-on-webpage-mobile-device-html)
  To show a number-friendly virtual keyboard on a webpage when clicking on an `input` HTML element in mobile devices, you can use the `type` attribute with the value of `number` in the `input` HTML element.

### TL;DR

```html
<!-- A simple webpage with an `input` HTMl element -->
<html>
  <body>
    <label for="numberInput">Enter Mobile Number</label>
    <input type="number" id="numberInput" />
  </body>
</html>
```

For example, let's say we have an `input` HTML element to take some numbers from the user on a webpage. Normally we would use the `type` attribute with the value of `text` to accept some values from the user.

The HTML for that would look like this,

```html
<!-- A simple webpage with an `input` HTMl element -->
<html>
  <body>
    <label for="numberInput">Enter Mobile Number</label>
    <input type="text" id="numberInput" />
  </body>
</html>
```

Now if we click on the `input` HTML element on a mobile device, a virtual keyboard pops up to enter the value to the input.

The keyboard looks like this,

![side-by-side screenshots of simple virtual keyboard that is not number friendly on an ios phone](/uploads/IMG_4055_af1326337c.jpg)

As you can see, the keyboards shown in the IOS OS device have a normal virtual keyboard without any help to write numbers easily for the user.

What I mean by this is, the number pad is not visible directly on the virtual keyboard and we would have to click the sections of the numbers to write it.

Now to remove this hassle, we can replace the value of `text` with `number` on the `type` attribute on the `input` HTML element.

It can be done like this,

```html
<!-- A simple webpage with an `input` HTMl element -->
<html>
  <body>
    <label for="numberInput">Enter Mobile Number</label>
    <input type="number" id="numberInput" />
  </body>
</html>
```

Now the virtual keyboard looks like this,

![side-by-side screenshots of simple virtual keyboard that is number friendly on an ios phone](/uploads/IMG_4056_a2e83f4e29.jpg)

As you can see from the above image, the IOS device has the number pad directly shown to the user which helps the users to write numbers very easily.

We have successfully shown a number-friendly virtual keyboard on the webpage. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/show-number-friendly-virtual-keyboard-when-clicking-input-html-element-on-webpage-mobile-device-html-2obyg1?file=/index.html).

That's all 😃.