如何在JavaScript中为ENTER事件充值

How to recharge an ENTER event in JavaScript

本文关键字：事件 ENTER 中为 JavaScript      更新时间：2023-09-26

我有一个用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是可以点击的按钮）。

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

我还尝试在logout函数中调用函数Charge_Enter_Event_for_Login()，但没有结果。

如果#Do_Login按钮是<input type="submit">标记，则当焦点在<input type="text">或<input type="password">元素上时按下ENTER时，它将自动触发。

为了回答这个问题，我的猜测是：当登录成功时，你可能以某种方式隐藏了登录表单？可能是通过销毁form DOM对象。当稍后重新创建form以在注销后再次显示登录表单时，您将需要再次附加事件，因为它是一个新的DOM对象。

您需要将angularjs指令ng-submit与form元素一起使用。您的代码看起来非常原始。请先浏览angular网站，了解angular指令是如何工作的。此外，如果您有angularjs，则不需要使用jQuery，因为您可以使用angular提供的双向绑定。我在这里为您的场景创建了一个jsbin。请使用它，并尽可能多地尝试使用angularjs指令。

看起来您的事件仅在页面加载时绑定。你真的不应该把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);
                    });
                }
            });
        };
    });

所以你的输入看起来是这样的：

<input type="text" id="Username" submit-action="functionToExecute()">

  • 或者使用角度CCD_ 14指令：

<input type="text" id="Username" ng-keypress="functionToExecute($event)">

使用此解决方案，您需要检查函数中keyCode的值。

相关文章：