在Chrome中输入带重音符号的电子邮件值错误

Question

在Chrome中输入带有重音符号的字符到电子邮件输入框时，它会将值更改为奇怪的东西。

当输入电子邮件：test@Bücher.ch时，输入框的值变成了：[e-mail]。

$('#email').val() // --> [e-mail]
document.getElementById('email').value // --> [e-mail]

使用文本输入框或其他主流浏览器不会出现此问题。

请参见此示例。发生了什么？如何解决？

- TheGwa

---

同样的问题 - http://stackoverflow.com/questions/24818970/accented-chars-are-not-retrieved-correctly 如果你需要电子邮件类型，也许第二个答案可以帮助... - sinisake

似乎Chrome不支持TLD的国际化域名(IDN)，而是将它们转换为Punycode。 - CodingIntrigue

这两个地址是相同的，你应该可以使用任意一个。 - Álvaro González

Punnycode版本不太易读，容易让用户感到困惑。 - TheGwa

我添加一个类似于gmaiĺ.com的电子邮件，问题是HTML验证和大多数服务器验证都将通过。如果必须要检查DNS MX记录。 - Tokeeen.com

我找到了一个解决方案，它使用type="text"来避免表单验证错误，同时仍然在移动键盘上保留@符号（在Android的Chrome中测试过），并将其打包为一个即插即用的.js文件。我的电子邮件在我的个人资料中。 - PHP Guru

Answer 1

我认为这不是错误，而是因为规范的原因。Chrome只是以与其他浏览器不同的方式遵循规范:)并将IDN转换为其ascii表示。

https://code.google.com/p/chromium/issues/detail?id=410937

要将其解码回来，您可以使用一些第三方解决方案，例如

使用破折号字符转换punycode为Unicode

。

- Lukas Kral

Answer 2

对于再次遇到此问题的其他人，我建议使用punycode npm包。 https://www.npmjs.com/package/punycode

我认为只有Chrome会将电子邮件编码为punycode。无法阻止Chrome进行punycode编码。您只需让它完成工作并在后端解码punycode即可。

const punycode = require('punycode')
let data = request.only(['email'])
data['email'] = punycode.toUnicode(data['email'])

在Adonis中运行得非常好，我的头痛问题消失了。

- glinda93

Answer 3

在我的这边，我刚刚将输入字段的类型从电子邮件更改为文本，现在它正常工作了。

这是

<input id="Email" name="Email" type="email">

现在就是这样了。

<input id="Email" name="Email" type="text">

- VRoy

Answer 4

小提琴

<form>
    <input id="email2" type="text"placeholder="[e-mail]" autofocus required pattern="[^ @]*@[^ @]*">
    <input type ="submit">
</form>

这个问题是因为输入的电子邮件类型，在“@”符号后，浏览器会出现此错误。我认为他们认为电子邮件地址必须始终为英文。

无论如何，请使用文本类型，然后提供电子邮件正则表达式。

- Mehmet Eren Yener

---

请参考Lukas Kral的回答，了解为什么这不是一个错误。 - beercohol