Input type email value in Chrome with accented characters wrong

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

When entering the email: [email protected]ü 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?



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.

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

Converting punycode with dash character to Unicode


For others who face this problem again, I suggest use punycode npm package.

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.



    <input id="email2" type="text"placeholder="[email protected]" autofocus required pattern="[^ @]*@[^ @]*">
    <input type ="submit">

For this problem it is because of input's email type, after '@' sign browser gives this error. I think they believe email adresses always must be in English.

Anyway Use text type then provide email regex


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.