DEV Community

Tomoyuki Kashiro
Tomoyuki Kashiro

Posted on • Originally published at blog.tomoyukikashiro.me on

How to control browser keyboard

Control browser keyboard using input[type]

Google explains the way to control browser keyboard for html form using type attribute in Create Amazing Forms

For example if you use type="email

<input type="email">

The keyboard which is customized for typing email address will show.

The keyboard when you set type=email

But this also has side effects.For example, if you use type="number"

<input type="number">

An unexpected element to support typing number will be shown inside the element and the number you type will be increased and decreased by scrolling when you hover the element.

The keyboard when you set type=number

You can reset the former by CSS and reset the latter by JavaScript but you can’t use it easily.

What is inputmode

Web technology for developers > HTML: Hypertext Markup Language > Global attributes > inputmode

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:

inputmode is a attribute which allow us to control browser keyboard.The value you can set are none, text, decimal, numeric, tel, search, email, url. Let’s check how these value affect.I checked these browsers.

  • Safari - iOS 13 iPhone 8 (simulator)
  • Chrome - Android 10 Pixel 3a
  • Chrome - windows 10 Surface Go (tablet)

This browser below didn’t support it at this moment.

  • Edge - windows 10 Surface Go (table)

inputmode=none

<input type="text" inputmode="none">

The value if you implement own software keyboard will not show system keyboard but…

  • Safari - iOS 13 iPhone 8 (simulator)
  • Edge - windows 10 Surface Go (tablet)
  • Chrome - windows 10 Surface Go (tablet)

These browsers show system keyboard.

inputmode=text

<input type="text" inputmode="text">

iOS safari / Android Chrome inputmode=text windows10 Surface Go Chrome inputmode=text

inputmode=decimal

<input type="text" inputmode="decimal">

This value shows keyboard which allow user type decimal easily (not only number but also .).

iOS safari / Android Chrome inputmode=decimal windows10 Surface Go Chrome inputmode=decimal

inputmode=numeric

<input type="text" inputmode="numeric">

iOS safari / Android Chrome inputmode=numeric windows10 Surface Go Chrome inputmode=numeric

inputmode=tel

<input type="text" inputmode="tel">

This value shows keyboard which allow user type phone number easily such as +, * and #.

iOS safari / Android Chrome inputmode=tel windows10 Surface Go Chrome inputmode=tel

inputmode=search

<input type="text" inputmode="search">

iOS safari / Android Chrome inputmode=search windows10 Surface Go Chrome inputmode=search

inputmode=email

<input type="text" inputmode="email">

This value shows keyboard which allow user type email easily such as alphabet and @.

iOS safari / Android Chrome inputmode=email windows10 Surface Go Chrome inputmode=email

inputmode=url

<input type="text" inputmode="url">

This value shows keyboard which allow user type URL easily such as / and .com.

iOS safari / Android Chrome inputmode=url windows10 Surface Go Chrome inputmode=url

Notes

You can control browser keyboard using inputmode but this doesn’t mean that you can control the value which user will type.For example, you can show user email specialized keyboard using inputmode=email but user can still input email invalid value.So you need to validate values user input.

Browser Support

https://caniuse.com/#feat=input-inputmode

Demo

https://codepen.io/Tkashiro/full/dyyROPJ

Top comments (0)