inputmodeによるiOSソフトウェアキーボードの表示切り替え

Sample

以下を表示させ、それぞれのinput要素をiOSでタップしたところをスクショした。

code:html

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

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

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

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

inputmode="url"

ドット・スラッシュ・.jpが表示される

https://gyazo.com/3cb31e8df914a23da47a625a26662d5b

inputmode="email"

アットマークとドットが表示される

https://gyazo.com/571c2cda4175cd6e932677b1d0e9544e

inputmode="numeric"

数字

https://gyazo.com/1394535c958040562866c01d9a89b59e

inputmode="decimal"

数字＋ドット

https://gyazo.com/e5fbbe5030c3d0d28c290c01ae35949c

備考

numeric や decimal の場合に type="number"ではなく type="text" にしている理由

type="number"だと input の右側に増減ができるUIが表示される

こんなの↓

https://gyazo.com/38b0b3476f45ab7e287775709af26e36

1つずつ数字を増減させたい状況あんまりないかも→ textにしている

参考