如何在JavaScript中为ENTER事件充电

我用AngularJS和Bootstrap开发了一个SPA。用户可以输入用户名和密码登录应用程序。我想允许，在输入用户名和值后，按ENTER键将触发登录过程，就像单击了

login

按钮一样

我使用的代码是：

    Charge_Enter_Event_for_Login = function () {
        $(document).ready(function(){
            $('#Username').keypress(function(e){
                if(e.keyCode==13) {
                    $('#Do_Login').click();
                    return false;
                }
            });

            $('#Password').keypress(function(e){
                if(e.keyCode==13) {
                    $('#Do_Login').click();
                    return false;
                }
            });
        });
    }

    Charge_Enter_Event_for_Login() ;

（元素

Do_Login

是可以单击的按钮）

第一次就可以了。但是，如果我注销，则不会再触发该事件，除非我使用浏览器的“重新加载”按钮

我还尝试在注销函数中调用函数

Charge\u Enter\u Event\u for\u Login（）

，但没有结果。

您需要使用带有

表单
元素的angularjs指令
ng submit
。你的代码看起来很原始。请先浏览angular网站，了解angular指令是如何工作的。此外，如果您有angularjs，则不需要使用jQuery，因为您可以使用angularjs提供的双向绑定。我已经为您的场景创建了一个jsbin。请使用它，并尽可能多地尝试使用
angularjs
指令
您需要将angularjs指令
ng submit
与
表单
元素一起使用。你的代码看起来很原始。请先浏览angular网站，了解angular指令是如何工作的。此外，如果您有angularjs，则不需要使用jQuery，因为您可以使用angularjs提供的双向绑定。我已经为您的场景创建了一个jsbin。请使用它，并尽可能多地尝试使用
angularjs
指令
如果
#Do_Login
按钮是一个
标记，则当焦点位于
或
元素上时，按下ENTER键将自动触发该按钮

要回答这个问题，我的猜测是：当登录成功时，您可能以某种方式隐藏了登录表单？可能是通过销毁
表单
DOM对象。当以后重新创建
表单以在注销后再次显示登录表单时，您需要再次附加事件，因为它是一个新的DOM对象。
如果
#Do_login
按钮是一个
标记，然后，当焦点位于
或
元素上时，按下ENTER键将自动触发

要回答这个问题，我的猜测是：当登录成功时，您可能以某种方式隐藏了登录表单？可能是通过销毁
表单
DOM对象。当以后重新创建
表单以在注销后再次显示登录表单时，您需要再次附加事件，因为它是一个新的DOM对象。
看起来您的事件仅在pageload上绑定。您真的不应该将jquery用于这种事情

您有两种可能的解决方案：


对输入使用指令：

 angular.module('yourAppName')
    .directive('submitAction', function () {
        return function (scope, element, attrs) {
            element.on("keypress", function (e) {
                e.preventDefault();

                if(e.keyCode === 13) {
                    scope.$apply(function () {
                        scope.$eval(attrs.submitAction);
                    });
                }
            });
        };
    });



因此，您的输入如下所示：



或者使用angular
ng按键
指令：


使用此解决方案，您需要检查函数中键代码的值。
看起来您的事件仅在pageload上绑定。您真的不应该将jquery用于这种事情

您有两种可能的解决方案：


对输入使用指令：

 angular.module('yourAppName')
    .directive('submitAction', function () {
        return function (scope, element, attrs) {
            element.on("keypress", function (e) {
                e.preventDefault();

                if(e.keyCode === 13) {
                    scope.$apply(function () {
                        scope.$eval(attrs.submitAction);
                    });
                }
            });
        };
    });



因此，您的输入如下所示：



或者使用angular
ng按键
指令：


使用此解决方案，您需要检查函数中键代码的值。
谢谢@C14L。我认为第二段描述了这种情况。问题在于，显示用户名和密码输入的HTML中包含大量的
ng if
，用于调节元素的显示。另一个问题是，在注销时，没有刷新，只有登录页的显示。刷新也可以解决这个问题（我认为）。如果
销毁并重新创建DOM元素，则使用
ng。改为使用
ng show
，这只会隐藏元素，并且当元素再次可见时，附加的事件仍将起作用。好吧，我花了比预期更多的时间，但我终于检查了您关于sing
ng show
的建议。我完全按照你解释的那样工作。谢谢@C14L。谢谢@C14L。我认为第二段描述了这种情况。问题在于，显示用户名和密码输入的HTML中包含大量的
ng if
，用于调节元素的显示。另一个问题是，在注销时，没有刷新，只有登录页的显示。刷新也可以解决这个问题（我认为）。如果
销毁并重新创建DOM元素，则使用
ng。改为使用
ng show
，这只会隐藏元素，并且当元素再次可见时，附加的事件仍将起作用。好吧，我花了比预期更多的时间，但我终于检查了您关于sing
ng show
的建议。我完全按照你解释的那样工作。谢谢@C14L。谢谢@Lithium。将检查第二个选项（稍后），并让您知道。但有一个问题：您在使用
提交操作时定义了指令
提交操作
（即在指令声明中缺少介于“
-
”之间的字符）。我已经看过很多次了，从来没有停下来检查原因。这就是Angular希望s使用它的方式吗？是的，这就是我们应该如何声明指令，
myDirective
使用驼峰大小写，但是当我们在html的元素中使用它时，它就变成了
myDirective
。谢谢@Lithium。将检查第二个选项（稍后），并让您知道。但有一个问题：您在使用
提交操作时定义了一个指令
提交操作
（即在指令declar中缺少介于“
-
”之间的字符）