フォームのemail入力欄のtype属性が効かない

今回ハマったこと

お問い合わせフォームなどを設置する際、inputタグに入力内容に適したtype属性を設定しますよね。

通常、電話番号であれば「tel」、メールアドレスであれば「email」、パスワードであれば「password」など様々な属性値を設定することができます。

type属性一覧

本来スマホで見ると、属性値が「tel」の場合はキーボードが数字入力になったり、「password」の場合は英字キーボードに自動的に切り替わってくれます。

今回ハマったことはtype属性「email」を設定した時に英字キーボード入力欄にならないという事象です。

とりあえずググってみた

同じような事象が起きている記事がないか調べました。

こちらの記事に気になることが書いてありました。

「ちなみに日本語キーボードだと「email」と「url」は普通と変わりません。そして以前使用していたキーボードの表示方法を変更される感じの仕組みっぽいので、入力欄が「名前」の後に「メールアドレス」となってた場合、メールアドレスの欄に入力を切り替えただけでは何も恩恵を受けられません。」

つまり直前に使っていたキーボードが表示されてしまう仕組みだそうです。

さっそく結論

今回時間がなかったこともあり、100%調べ切れていないかもしれないのですが、ここでの結論はiPhoneなどのスマホに関して、type=”email”を指定したのにもかかわらず、キーボードが英字にならない件に関しては「仕方ない!!!」ということにまとまりました。

個人的にはワンタッチで切り替えることができるし、そこまでこだわることはないとおもいますが。

時間があるときにまた少し調べてみます。

参考にさせていただいた記事

こちらの記事も大変分かりやすく参考になりました。

特にスマホのSafariの場合はかなりデバイス仕様が強く、HTML側で入力モードを制御するのは難しいようです。

related article

2019/10/23 HTML

一般的なSNSシェアボタンの配置

2020/04/16 HTML

Noto Sans JPがIE11で効かない