Issue
If I have an <input type="email">
, and the user enters an Internationalized Domain Name, Angular (EDIT: except it's not Angular's fault - see my answer for details) automatically converts the value to punycode, which is a nice feature, but very confusing for users if the value is displayed back to them. E.g.
abc@ábc.com
becomes
abc@xn--bc-lia.com
It also causes issues when a backend is expecting the original Unicode version of the domain, and the Angular app instead sends the punycode version.
I can use e.g. punycode.js to convert it back, but is there a way to do this in Angular without involving another library - either tell Angular not to do the encoding, or get the original value subsequently?
var myApp = angular.module('myApp',[]);
function thing($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<p>Copy this text into the input:</p>
<p>abc@ábc.com</p>
<div ng-controller="thing">
<input id="inp" type="email" class="form-control" ng-model="addr">
<p>Model gets: {{addr}}</p>
</div>
</body>
Solution
It turns out it's not Angular that's doing it, it's Chrome (Safari does not have the same behaviour, haven't tested other browsers). See for example Input type email value in Chrome with accented characters wrong
Here's an example of it happening without Angular - try this in Chrome:
function update() {
document.getElementById('output').innerText = document.getElementById('inp').value
}
<p>Copy this text into the input:</p>
<p>abc@ábc.com</p>
<div ng-controller="thing">
<input id="inp" type="email" onchange="update()">
<p>Browser says: <span id="output"></span></p>
</div>
So the short answer is no, there's no way of stopping this via Angular - and currently there doesn't appear to be a way to tell Chrome not to do it either.
Answered By - CupawnTae
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.