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.)