AngularJS - ng-keypress 不适用于输入事件答案

【问题标题】：AngularJS - ng-keypress not working for enter eventAngularJS - ng-keypress 不适用于输入事件
【发布时间】：2018-04-18 12:01:27
【问题描述】：

在我的项目中，ng-keypress 不适用于所有地方的 Enter 键。在某些地方，它工作得很好，但在其他地方，它适用于除 Enter 键之外的所有键。

这里我在ng-keypress 上调用test() 方法。

<div class="actions">
    <div class="ui approve button red" data-ng-click="test()" id="confirm-yes" tabindex="8" ng-keypress="test()">Yes</div>
    <div class="ui cancel button" data-ng-click="test()" id="confirm-no" tabindex="7" ng-keypress="test()">Cancel</div>
</div>

从测试方法来看，我只是展示了关键代码。对于除 Enter 之外的所有其他按键，我都可以正确看到 keycode。

$scope.test = function () { 
            alert('test called'+event.keyCode);
        }

我浏览过很多 Stack Overflow 文章，我确信它的语法是正确的，但我对它的奇怪行为完全感到困惑。

知道为什么ng-keypress 不能用于输入并且它可以用于所有其他键。

【问题讨论】：

这不是为div 制作的事件，您可以在textarea 或textbox 等任何输入字段上尝试。
他为那个 div 添加了 tabindex。希望它也适用于 div。@ArpitMeena
为什么不将$event 传递给test() 函数？
传递 $event 即使它不起作用然后尝试 ng-keyup，它的行为也与 ng-keypress 相同
尝试输入事件而不是 ng-keypress :p

标签： javascript html angularjs dom-events enter

【解决方案1】：

最后我不得不用<button> 标记替换<div> 标记来解决这个问题。 Button tag 完美解决了这个问题。

<div class="actions">
    <button class="ui approve button red" data-ng-click="test()" id="confirm-yes" tabindex="8" ng-keypress="test()">Yes</button>
    <button class="ui cancel button" data-ng-click="test()" id="confirm-no" tabindex="7" ng-keypress="test()">Cancel</button>
</div>

【讨论】：

所以你没有解决问题，你为项目逻辑创建了另一种方法，请从这个答案中删除真正的答案检查这是误导
但对我来说，ng-keypress 也不适用于按钮标签的角度 1。

【解决方案2】：

这可能是因为调用 event.stopImmediatePropagation() 的另一个处理程序：到目前为止，没有调用任何其他处理程序

您可以在浏览器的开发者工具中检查元素的现有处理程序

【讨论】：

你对这个 event.stopImmediatePropagation() 有什么有用的参考吗？
@RakeshBurbure 肯定是developer.mozilla.org/ru/docs/Web/API/Event/…
我不能 100% 确定，因为阻止调用所有其他处理程序听起来很奇怪；还有一种不同的情况：如果在按钮或链接获得焦点时按下 Enter，则角度调用“ng-click”处理程序 - 因此可以在那里操作 stopImmediatePropagation（如果是这种情况）
在大多数浏览器的开发人员工具中，您可以为特定事件设置断点：因此为按键事件创建一个断点，然后查看谁在处理该事件

【解决方案3】：

您在 ng-click 和 ng-keypress 中使用相同的函数 test()，请尝试用另一个函数替换

   <div class="ui approve button red" data-ng-click="test()" id="confirm-yes" tabindex="8" ng-keypress="testcheck()">Yes</div>
    <div class="ui cancel button" data-ng-click="test()" id="confirm-no" tabindex="7" ng-keypress="testcheck()">Cancel</div>

【讨论】：

嗨@Sajeetharan：我也试过这样做，但没有运气。您是否知道 ng-keypress 阻止 Enter 键并允许其他键的任何情况。在我的项目中，在其他地方 ng-keypress 工作正常。但在某些阶段它不会响应回车键。
你能创建一个plunker吗

【解决方案4】：

我用 ngKeypress 指令处理了同样的问题。特别有趣的是，在 Angular 的官方示例中，可以识别按“Enter”。

使用 ngKeydown 指令解决了这个问题。处理“Enter”键时应该没有任何区别。

【讨论】：