<input type=email>の場合のios IMEの挙動について

Question

前提

iosのIMEの挙動について質問です。
動作環境
ios:13.1.3(iPhone7)
ブラウザ:chrome

実現したいこと

iosのIMEをフロントエンド側の実装で制御したい。
登録フォーム実装時に<input type="email">を指定した場合、モバイル端末で入力する場合email形式のIME(@や.が付いたもの)になると思います。
ただemail形式のIMEに初期表示されないため、forcusが当たった時にはemail形式のIMEになるように制御したいです。

発生している問題・エラーメッセージ

初期表示されるIMEは端末で前回表示していたIMEが表示される？(憶測です)

該当のソースコード

<input type="email" autocomplete="off">
<input type="password" autocomplete="off">
<input type="tel" autocomplete="off">

試したこと

<input type="email" autocomplete="off" pattern="^[0-9A-Za-z]+$">

patternで絞れば日本語入力のモードにはならないかと試しましたがダメでした。

補足情報（FW/ツールのバージョンなど）

<input type="password">や<input type="tel">の場合それぞれ専用のIME(電話番号のみなど)になるのですが、<input type="email">では制御の方法は無いでしょうか？

補足の補足

gmailでは日本語メールアドレスも可能みたいなので、UX的な観点から見ればIMEの制御はデバイス側の領域でフロントエンド側の実装で制御するべきでは無いのかなあ。
https://gigazine.net/news/20140806-gmail-admit-non-alphabet/

Answer 1

パターンだけで言えば最低限「@」と「.」はほしいですね
IMEモードは推奨されないので期待しないほうがいいいでしょう

<form>
<input type="email" autocomplete="off" pattern="[0-9A-Za-z@.]+">
</form>

ただし、emailアドレスに使える文字列は他にもありますので
あまりpatternで縛ってしまうのは得策ではありません

Comments

[sol_kenta]

ご回答ありがとうございます。
確かにpatternで縛ってしまうとまずいですね。別の方法探ってみようと思います！

Answer 2

inputmode 属性
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
https://momdo.github.io/html/interaction.html#input-modalities:-the-inputmode-attribute

email ユーザーエージェントは、"@"文字および"."文字のような、電子メールアドレスの入力を補助するためのキーとともに、ユーザーのロケールでテキスト入力が可能な仮想キーボードを表示すべきである。

こちらでは iOS 環境がないので確認してみてください。
あまり期待しないで属性を書いておくのが吉です。

Comments

[sol_kenta]

ご回答ありがとうございます。
試してみましたがダメでした。