javascript - Input type email value in Chrome with accented characters wrong - Stack Overflow

admin管理员组

文章数量:1341419

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 bees: [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?

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 bees: [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?

• javascript
• jquery
• html
• google-chrome

Share Improve this question Follow asked Aug 20, 2015 at 11:50 TheGwaTheGwa 1,8892727 silver badges4545 bronze badges 6

• 2 Same problem - stackoverflow./questions/24818970/… If you need email type, maybe second answer could help... – sinisake Commented Aug 20, 2015 at 11:58
• 2 Looks like Chrome doesn't support IDN for TLDs and is converting them to Punycode – CodingIntrigue Commented Aug 20, 2015 at 12:00
• Both addresses are identical, you should be able to use either. – Álvaro González Commented Aug 20, 2015 at 12:09
• 1 The punnycode version does not read so nicely and confuses users. – TheGwa Commented Aug 30, 2015 at 18:42
• 1 I add an email like this gmaiĺ. the problem is the html validation and most server validations will pass. If have to check the DNS MX records. – Tokeeen. Commented Jan 10, 2018 at 10:12

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 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./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

For others who face this problem again, I suggest use punycode npm package. https://www.npmjs./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.

On my side I have just changed the type of the input field from email to text and now it's working fine.

It was

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

And now it is

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

Fiddle

<form>
    <input id="email2" type="text"placeholder="[email protected]" 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

本文标签： javascriptInput type email value in Chrome with accented characters wrongStack Overflow