绑定ENTER键keydown事件失效，回车触发表单默认提交行为求助

嘿，我看你碰到的问题了——明明给输入框绑定了ENTER键的keydown事件，想调用自定义的sendConfirmPhoneNumberCode()，结果按下回车还是触发了表单的默认提交行为。咱们来搞定它：

问题出在哪？ #

你的代码里有个容易忽略的小错误：在keydown的回调函数里，你用了event.preventDefault()，但函数接收的事件参数是e，不是全局的event！这就导致阻止默认行为的代码根本没生效，表单自然还是会按默认逻辑提交。

另外，就算修复了这个点，有时候事件冒泡也可能“钻空子”，所以咱们再加一层保险更稳妥。

修复方案 #

1. 修正keydown事件里的阻止默认行为代码 #

把event.preventDefault()改成e.preventDefault()，确保用的是当前回调里的事件对象：

$(".code").keydown(function (e) {
    var code = e.keyCode || e.which;
    if (code == 13) {
        e.preventDefault(); // 这里改成e，对应函数参数的事件对象
        $("body").append("Keydown triggered.<br>");
        sendConfirmPhoneNumberCode();
        return false;
    }
});

2. 给表单绑定submit事件彻底阻止默认提交（可选但更可靠） #

为了彻底杜绝表单默认提交的可能，直接给表单本身绑定submit事件，阻止它的默认行为：

$("#confirmPhoneNumberForm").submit(function(e) {
    e.preventDefault();
    return false;
});

这样一来，不管是通过回车键、还是其他意外触发表单提交的情况，都会被拦截，完全由你的自定义函数来处理逻辑。

测试效果 #

修改完成后，按下回车键就只会执行你想要的sendConfirmPhoneNumberCode()函数，页面不会再出现默认的表单提交跳转啦。

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