如何在MVC登录表单中实现回车键触发登录？是否需用jQuery？

嘿，这个需求很常见！其实两种方式都能搞定——既可以用jQuery，也完全能不依赖它用原生JavaScript实现，看你项目里有没有引入jQuery啦。先看看你的表单结构：你用了一个隐藏的submit按钮，但实际触发提交的是btn-login这个type="button"的按钮，所以核心就是监听回车键，然后触发提交逻辑就行。

原生JavaScript方案（无依赖，更轻量） #

如果不想额外依赖jQuery，用原生JS就足够了，代码也不复杂。你可以给整个表单绑定键盘事件，或者只给输入框绑定，两种方式都可以：

方式1：监听整个表单的回车事件 #

// 获取登录表单元素
const loginForm = document.getElementById('login_form');
loginForm.addEventListener('keydown', function(e) {
    // 判断是否按下回车键（兼容新旧API：e.key和e.keyCode）
    if (e.key === 'Enter' || e.keyCode === 13) {
        e.preventDefault(); // 阻止默认行为，避免可能的冲突
        // 触发登录按钮的点击事件，和手动点击按钮效果一致
        document.getElementById('btn-login').click();
        // 也可以直接提交表单：this.submit(); 效果是一样的
    }
});

方式2：只监听输入框的回车事件 #

如果想更精准，只在邮箱或密码输入框按回车时触发，可以这样写：

// 获取表单内的文本和密码输入框
const inputFields = document.querySelectorAll('#login_form input[type="text"], #login_form input[type="password"]');

inputFields.forEach(field => {
    field.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault();
            document.getElementById('btn-login').click();
        }
    });
});

jQuery方案（简洁，需依赖jQuery） #

如果你的项目已经引入了jQuery，那代码会更简洁直观：

方式1：监听表单的回车事件 #

$('#login_form').on('keydown', function(e) {
    // jQuery用e.which来判断按键码，回车键是13
    if (e.which === 13) {
        e.preventDefault();
        $('#btn-login').click();
    }
});

方式2：监听输入框的回车事件 #

$('#login_form input[type="text"], #login_form input[type="password"]').keydown(function(e) {
    if (e.which === 13) {
        e.preventDefault();
        $('#btn-login').click();
    }
});

小补充 #

为什么你的表单默认按回车没反应？因为浏览器默认会在表单内按回车时触发第一个type="submit"的按钮，但你的submit按钮是hidden状态，可能浏览器没有触发它。所以手动监听回车事件是最可靠的方式，不管按钮状态如何都能正常工作。

内容的提问来源于stack exchange，提问作者codemonkey00016