input[type=email]はブラウザによって挙動が異なる
お仕事でinput[type=email]に悩まされたのでメモ。
input[type=email]とは
まあ、説明は説明は不要ですかね。
メールアドレスの入力でいい感じに入力形式のチェックもブラウザでしてくれるやつです。
とまあ、ブラウザ側でのお手軽な入力制限として使うこともあるのですが、実は各ブラウザで挙動が違ってビックリでした。。。
ブラウザ | ローカル部(@より前)での非ascii文字の許容 | ドメイン部(@より後)での非ascii文字の許容 | Punycode変換 |
---|---|---|---|
Chrome | しない | する | する |
Firefox | しない | する | しない |
Safari | しない | しない | - |
※ちなみに各ブラウザのバージョンは下記です
非ascii文字の許容
ブラウザ毎に弾いてくれたり、くれなかったりします。。。
正確には日本語ドメインなども存在するのでドメイン部は許容されてもいいのですが、Safariさんはそれは許してくれません。
Punycode
今回初めて知ったのですが、日本語ドメインなどはそのままではDNSでひけないので、使用可能な文字列に変換することをPunycode(変換)と言うらしいです。
で、ChromeだけこのPunycode変換をブラウザがやってくれるので非ascii文字が含まれると下記のように変換した文字列をサーバー側に送ります。
例)test@example.jpら→test@example.xn—com-373b
なので、サーバー側で日本語文字などが含まれていたら弾きたいと思っていても送られてきたパラメーターはすでに変換されていまっていて含まれていないと。。。
Firefoxだとそのまま変換されずに送られてくるのでまだいいのですが。
どうする?
まあ要件次第といった感じなんですが、フロントサイドでどこまでやるかっていうところです。
(サーバーサイドをノーガードは流石にないと思いますが)
pattern属性で正規表現かけば統一できますが、表示されるメッセージまで変えたければさらにJSでゴニョゴニョする必要がありますし...