input[type=email]はブラウザによって挙動が異なる - パパエンジニアのアウトプット帳

お仕事でinput[type=email]に悩まされたのでメモ。

まあ、説明は説明は不要ですかね。
メールアドレスの入力でいい感じに入力形式のチェックもブラウザでしてくれるやつです。

とまあ、ブラウザ側でのお手軽な入力制限として使うこともあるのですが、実は各ブラウザで挙動が違ってビックリでした。。。

ブラウザ	ローカル部(@より前)での非ascii文字の許容	ドメイン部(@より後)での非ascii文字の許容	Punycode変換
Chrome	しない	する	する
Firefox	しない	する	しない
Safari	しない	しない	-

※ちなみに各ブラウザのバージョンは下記です

ブラウザ毎に弾いてくれたり、くれなかったりします。。。
正確には日本語ドメインなども存在するのでドメイン部は許容されてもいいのですが、Safariさんはそれは許してくれません。

今回初めて知ったのですが、日本語ドメインなどはそのままではDNSでひけないので、使用可能な文字列に変換することをPunycode(変換)と言うらしいです。

で、ChromeだけこのPunycode変換をブラウザがやってくれるので非ascii文字が含まれると下記のように変換した文字列をサーバー側に送ります。
例）test@example.jpら→test@example.xn—com-373b

なので、サーバー側で日本語文字などが含まれていたら弾きたいと思っていても送られてきたパラメーターはすでに変換されていまっていて含まれていないと。。。
Firefoxだとそのまま変換されずに送られてくるのでまだいいのですが。

まあ要件次第といった感じなんですが、フロントサイドでどこまでやるかっていうところです。
（サーバーサイドをノーガードは流石にないと思いますが）
pattern属性で正規表現かけば統一できますが、表示されるメッセージまで変えたければさらにJSでゴニョゴニョする必要がありますし...