1

HTML5 email input tag value is garbled when I input Portuguese characters to it.

 function test() {
  console.log(document.querySelector("input[type=email]").value)
 }
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Test</title>
</head>
<body>
 <input type="email" placeholder="input your email here">
 <button onclick="javascript:test();">Confirm</button>
</body>
</html>

Test input is xpto@sdjdsk.çom and it prints xpto@sdjdsk.xn--om-3ia in console.

However, if I change input tag like this:

<input type="email" placeholder="input your email here" value="xpto@sdjdsk.çom">

it prints xpto@sdjdsk.çom.

What is the reason and how can I solve it? (Workaround is OK.)

glinda93
  • 7,659
  • 5
  • 40
  • 78
  • A note for those coming along, this **isn't** a limitation of the console, you get the same issue dumping back to the DOM: https://jsfiddle.net/yq26s3nm/ – Jon P Jan 02 '20 at 05:17
  • @JonP I found something interesting. If you add any quotation mark in the beginning, you will get the correct result with the quotation mark. e.g. `"xpto@sdjdsk.çom` will dump `"xpto@sdjdsk.çom` correctly. – glinda93 Jan 02 '20 at 05:21
  • More interesting still, change the input type to "text" and it works : https://jsfiddle.net/yq26s3nm/1/ . It *may* be an issue with validating ".çom" as a Top Level Domain, but I'm guessing. – Jon P Jan 02 '20 at 05:23
  • @JonP I think this is Chrome's fault. Works correctly in Firefox. Although it's not valid email in Firefox, it is valid in Google Chrome and get the value wrongly. – glinda93 Jan 02 '20 at 05:25
  • Also note as is stands "sdjdsk.çom" works. As soon as you add @ preceded by another character it fails. – Jon P Jan 02 '20 at 05:30
  • @JonP Someone told me that it's punycoding feature that Chrome supports. But firefox does not support it. If you're interested, please refer to my answer in this question. – glinda93 Jan 02 '20 at 05:38
  • Good work on finding the dupe.... marked to close as dupe – Jon P Jan 02 '20 at 05:40

0 Answers0