You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
date: 2019-10-26
title: How to control browser keyboard
summary: You can control browser keyboard mode by using inputmodde attribute. That make form UX better!! I'll explain how to you it.
slug: how-to-control-browser-keyboard-inputmode
lang: en-US
tags:
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
<inputtype="email" />
The keyboard which is customized for typing email address will show.
But this also has side effects.
For example, if you use type="number"
<inputtype="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.
You can reset the former by CSS and reset the latter by JavaScript but you can't use it easily.
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
<inputtype="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
<inputtype="text" inputmode="text" />
inputmode=decimal
<inputtype="text" inputmode="decimal" />
This value shows keyboard which allow user type decimal easily (not only number but also .).
inputmode=numeric
<inputtype="text" inputmode="numeric" />
inputmode=tel
<inputtype="text" inputmode="tel" />
This value shows keyboard which allow user type phone number easily such as +, * and #.
inputmode=search
<inputtype="text" inputmode="search" />
inputmode=email
<inputtype="text" inputmode="email" />
This value shows keyboard which allow user type email easily such as alphabet and @.
inputmode=url
<inputtype="text" inputmode="url" />
This value shows keyboard which allow user type URL easily such as / and .com.
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.
date: 2019-10-26
title: How to control browser keyboard
summary: You can control browser keyboard mode by using inputmodde attribute. That make form UX better!! I'll explain how to you it.
slug: how-to-control-browser-keyboard-inputmode
lang: en-US
tags:
image: 'https://i.gyazo.com/40a56fb62613e6e1fd6f52cb45b36d66.jpg'
Control browser keyboard using input[type]
Google explains the way to control browser keyboard for html form using
type attribute
in Create Amazing FormsFor example if you use
type="email
The keyboard which is customized for typing email address will show.
But this also has side effects.
For example, if you use
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.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
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.
This browser below didn't support it at this moment.
inputmode=none
The value if you implement own software keyboard will not show system keyboard but...
These browsers show system keyboard.
inputmode=text
inputmode=decimal
This value shows keyboard which allow user type decimal easily (not only number but also
.
).inputmode=numeric
inputmode=tel
This value shows keyboard which allow user type phone number easily such as
+
,*
and#
.inputmode=search
inputmode=email
This value shows keyboard which allow user type email easily such as
alphabet
and@
.inputmode=url
This value shows keyboard which allow user type URL easily such as
/
and.com
.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
usinginputmode=email
but user can still inputemail 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
The text was updated successfully, but these errors were encountered: