How to show a URL-friendly virtual keyboard when clicking on an input HTML element on mobile devices?

December 13, 2022 - 2 min read

To show a url 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 url in the input HTML element.

TL;DR

<!-- A simple webpage with an `input` HTMl element -->
<html>
  <body>
    <label for="websiteName">Enter Website URL</label>
    <input type="url" id="websiteName" />
  </body>
</html>

For example, let's say we have an input HTML element to take a website url 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,

<!-- A simple webpage with an `input` HTMl element -->
<html>
  <body>
    <label for="websiteName">Enter Website URL</label>
    <input type="text" id="websiteName" />
  </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,

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

What I mean by this is that symbols like .com, /, . etc. are not visible directly on the virtual keyboard.

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

It can be done like this,

<!-- A simple webpage with an `input` HTMl element -->
<html>
  <body>
    <label for="websiteName">Enter Website URL</label>
    <input type="url" id="websiteName" />
  </body>
</html>

Now the virtual keyboard looks like this,

As you can see from the above image, the IOS device has the .com, /, . etc. symbol directly shown to the user which helps the users to write the website url very easily.

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

See the above code live in codesandbox.

That's all 😃.