Input type email value in Chrome with accented characters wrong

Question

When entering accented characters into an input type email in Chrome, it changes the value to something strange.

When entering the email: test@Bücher.ch the input value becomes: [email protected].

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

This does not happen with an input type text, or in other major browsers.

See this fiddle for example. What is going on here and how do I get around it?

Answer 1

For others who face this problem again, I suggest use punycode npm package. https://www.npmjs.com/package/punycode

I think only Chrome encodes email into punycode. There is no way to prevent Chrome from punycoding. You just let her do her work and decode punycode in backend.

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

Worked like charm in adonis and my headache disappeared.

Answer 2

I think it's not an error, it's because of the specification. Chrome just follows the specification in a different way than other browsers:) and translate the IDN into its ascii representation.

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

To decode it back you can use some 3rd party solution such as

Converting punycode with dash character to Unicode