IE10 事件处理按钮点击和 keyup

Question

在我的 HTML 文件中，我有一个文本框和一个按钮，它们没有任何关联。奇怪的是，当我在 文本框中输入文本并按下键盘上的 enter 时，它实际上运行 连接到按钮 ng 的函数-点击属性。 仅在 IE10 上发生， 但在 IE11 或任何其他浏览器上不会发生。

知道为什么会这样吗？

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

控制器

$scope.fr_group_update = function(event){ 
    if (event.keyCode === 13) {
        alert("This should run");
    }
};

$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

Answer 1

Angular 表单曾经有一个有趣的行为：如果表单中只有一个按钮，它将表单提交设置为单击该按钮。当您在文本框中按 Enter 时，您会触发表单提交。

现在我不知道为什么这是 IE 版本特定的，但这是我能说的最接近的事情。也许 IE 10 即使没有表单也在做类似的事情。

如果您不需要也没有表单，请在按钮周围添加一个，或者尝试将类型明确设置为按钮，看看是否有帮助。

Answer 2

IE10 seems to handle buttons 没有 type 属性就好像它们是提交按钮一样。因此，当您在页面上的任何输入上按回车键时，它会触发它找到的第一个按钮。

您可以通过将 type 属性显式设置为 button:

来轻松解决此问题

<button type="button" ng-click="purge_tasks()">Purge Selection</button>

Answer 3

对于 IE clean/fast 解决方案（至少在我的情况下）：

$event.stopPropagation();

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

JavaScript

$scope.fr_group_update = function(event){ 
    $event.stopPropagation();
    if (event.keyCode === 13) {
        alert("This should run");
    }
};
$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

IE10 事件处理按钮点击和 keyup

IE10 Event Handling for button ng-click and ng-keyup

javascript

internet-explorer-10

angularjs

angularjs-ng-click