防止 Angular 破坏电子邮件输入

Question

如果我有一个 <input type="email">，而用户输入一个 Internationalized Domain Name, Angular (EDIT: except it's not Angular's fault - see for details) automatically converts the value to punycode，这是一个不错的功能，但如果向用户显示回值，他们会感到很困惑。例如

abc@ábc.com

变成

abc@xn--bc-lia.com

当后端需要域的原始 Unicode 版本，而 Angular 应用程序反而发送 punycode 版本时，它也会导致问题。

我可以使用例如punycode.js 将其转换回来，但是有没有办法在 Angular 中执行此操作而不涉及另一个库 - 告诉 Angular 不要进行编码，或者随后获取原始值？

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>

Answer 1

只要您在输入类型 email 上使用 ng-model，angularjs 就会在输入上使用它的魔法。

不用 ng-model 试试

Answer 2

原来不是Angular在做，是Chrome（Safari不有同样的行为，没有测试其他浏览器).例如参见 [=12=]

这是一个没有 Angular 的例子 - 在 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>

所以简短的回答是否定的，没有办法通过 Angular 来阻止它 - 目前似乎也没有办法告诉 Chrome 不要这样做。

Answer 3

至于今天：2021-05-06 这些是关于将 输入字段从击键时 type=email 转换为 Punycode 的浏览器行为：

Chrome：转换为 Punycode
Firefox：不转换为 Punycode
Safari：不转换为 Punycode
Edge：不转换为 Punycode
Internet Explorer：不转换为 Punycode

如果您不希望 Chrome 出现此行为，请从您的输入字段中删除 type=email！

防止 Angular 破坏电子邮件输入

Prevent Angular from mangling email inputs

unicode

domain-name

angularjs