CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
TheGwa
TheGwa

Reputation: 1889

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

Upvotes: 13

Views: 5982

Answers (4)

VRoy
VRoy

Reputation: 1

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">

Upvotes: 0

glinda93
glinda93

Reputation: 8479

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.

Upvotes: 2

Lukas Kral
Lukas Kral

Reputation: 997

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

Upvotes: 7

Mehmet Eren Yener
Mehmet Eren Yener

Reputation: 2036

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

Upvotes: -1

Related Questions