Prevent Angular from mangling email inputs

问题

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>

回答1:

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.

回答2:

As soon as you use ng-model on input type email, angularjs will use its magic on the input.

Try it without ng-model

来源：https://stackoverflow.com/questions/37166639/prevent-angular-from-mangling-email-inputs

标签

angularjs

unicode

domain-name