防止Angular破坏电子邮件输入 | 防止Angular破坏电子邮件输入

本文介绍了防止Angular破坏电子邮件输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果我有<input type="email">，并且用户输入了国际化域名， Angular (除了不是Angular的错，有关详细信息，请参见我的答案)值设置为 punycode ，这是一个不错的功能，但如果显示该值，则会使用户感到困惑回到他们身上.例如

If I have an <input type="email">, and the user enters an Internationalized Domain Name, Angular ( 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

成为

[email protected]

当后端期望该域的原始Unicode版本时，它也会引起问题，而Angular应用则会发送punycode版本.

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.

我可以使用 punycode.js 可以将其转换回来，但是有没有办法在Angular中做到这一点涉及另一个库-要么告诉Angular不进行编码，要么随后获取原始值?

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>

推荐答案

事实证明，它不是Angular，而是Chrome(Safari的 not 行为相同，未测试其他功能)浏览器).例如，参见在Chrome中输入带有重音字符的电子邮件类型错误

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

以下是不使用Angular时发生的示例-在Chrome中尝试以下操作:

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>

所以简短的答案是否"，没有办法通过Angular停止它-目前似乎也没有办法告诉Chrome也不要这样做.

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.

这篇关于防止Angular破坏电子邮件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！