Chrome中的输入类型电子邮件值，重音字符错误

Question

将重音字符输入Chrome中的输入类型电子邮件时，会将值更改为奇怪的值。

输入电子邮件：test@Bücher.ch时，输入值变为： test@xn--bcher-kva.ch 。

$('#email').val() // --> test@xn--bcher-kva.ch
document.getElementById('email').value // --> test@xn--bcher-kva.ch

输入类型文本或其他主流浏览器不会发生这种情况。

例如，请参阅此fiddle。这里发生了什么，我该如何解决它？

Answer 1

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

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

要对其进行解码，您可以使用某些第三方解决方案，例如

Converting punycode with dash character to Unicode

Answer 2

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

我认为只有Chrome浏览器会将电子邮件编码为punycode。无法阻止Chrome进行punycoding。您只需让她做她的工作，并在后端解码punycode。

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

像阿多尼斯的魅力一样工作，我的头痛消失了。

Answer 3

Fiddle

<form>
    <input id="email2" type="text"placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*">
    <input type ="submit">
</form>

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

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