11

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: test@xn--bcher-kva.ch. 

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

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?

TheGwa
  • 1,919
  • 27
  • 44
  • 2
    Same problem - http://stackoverflow.com/questions/24818970/accented-chars-are-not-retrieved-correctly If you need email type, maybe second answer could help... – sinisake Aug 20 '15 at 11:58
  • 2
    Looks like Chrome doesn't support IDN for TLDs and is converting them to [Punycode](https://en.wikipedia.org/wiki/Punycode) – CodingIntrigue Aug 20 '15 at 12:00
  • Both addresses are identical, you should be able to use either. – Álvaro González Aug 20 '15 at 12:09
  • 1
    The punnycode version does not read so nicely and confuses users. – TheGwa Aug 30 '15 at 18:42
  • 1
    I add an email like this gmaiĺ.com the problem is the html validation and most server validations will pass. If have to check the DNS MX records. – Tokeeen.com Jan 10 '18 at 10:12
  • I found a solution that uses type="text" to get around form validation errors while still keeping the @ symbol on mobile keyboards (tested in Chrome for Android) and packaged it as a drop-in .js file. My email is in my profile. – PHP Guru Sep 13 '20 at 21:33

3 Answers3

7

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

Community
  • 1
  • 1
Lukas Kral
  • 987
  • 13
  • 22
2

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.

glinda93
  • 7,659
  • 5
  • 40
  • 78
-1

Fiddle

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

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

Mehmet Eren Yener
  • 2,006
  • 1
  • 23
  • 37