Question

如果我有一个<input type="email">，并且用户输入了Internationalized Domain Name，Angular （编辑：除了它不是Angular＆＃39; s，请参阅{{3}有关详细信息）会自动将值转换为my answer，这是一个很好的功能，但如果将值显示给用户，则会让用户感到非常困惑。 E.g。

abc@ábc.com

变为

abc@xn--bc-lia.com

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

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

＆＃13;

var myApp = angular.module('myApp',[]);

function thing($scope) {
}

＆＃13;

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

＆＃13;

Answer 1

事实证明，这不是Angular，它是Chrome（Safari 不具有相同的行为，没有测试过其他浏览器）。请参阅示例Input type email value in Chrome with accented characters wrong

这是一个没有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 2

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

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

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

Answer 3

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

不使用ng-model

尝试

阻止Angular破坏电子邮件输入

3 个答案: