将焦点设置在提交按钮上会触发绑定事件答案

【问题标题】：Setting focus on submit button fires the bound event将焦点设置在提交按钮上会触发绑定事件
【发布时间】：2014-05-06 11:28:13
【问题描述】：

我有几个文本输入，其中按回车键应该移动到下一个，在最后一个文本输入之后，提交按钮应该在没有被按下的情况下获得焦点。通过 enter 从输入跳转到输入可以正常工作：

$("input.insert").keydown(function (event) {
    if(event.keyCode == 13) {
        $("input.insert").eq($("input.insert").index(this) + 1).focus(); 
    }
});

但是，当光标位于提交按钮前面的最后一个文本输入字段中并且我按 Enter 键时，焦点会跳转到提交按钮并释放其点击事件。为什么？我希望用户在离开最后一个输入字段后再次按 Enter。

非常感谢您的帮助。

【问题讨论】：

标签： javascript jquery focus

【解决方案1】：

如果不查看代码的其余部分，很难准确地说出您的代码发生了什么，但我确信添加 event.preventDefault() 行将解决您的问题。它基本上会阻止浏览器执行事件的默认操作，请参阅示例http://jsfiddle.net/3m4eL/

$('input[type="text"]').keydown(function (event) {
    if (event.keyCode == 13) {
        $("input").eq($("input").index(this) + 1).focus();
        event.preventDefault();
    }
});

请注意，我只将函数绑定到文本输入的 keydown 事件，而不是提交输入 - 否则您根本无法提交表单

请注意 event.preventDefault() 在 9 版之前的 Internet Explorer 中并不存在，但 jQuery 为您添加了缺少的功能并使用 event.returnValue = false 作为后备

【讨论】：

这确实很有帮助！非常感谢。您的两个建议对于使这些东西按预期执行都是必要的。在不将 keydown 事件限制为文本输入的情况下，只会发生一些奇怪的事情：以下提交按钮有一个边框，但没有虚线焦点指示器，并且不响应任何进一步的键。我必须说，这一切真的很尴尬。你是如何想出解决方案的？我该怎么做？再次感谢。 :o)
如果我真的被这样的事情困住了，那么我所做的就是将事情剥离回最简单的形式（可行），然后慢慢将其余部分添加回来。这只会让事情变得更容易因为您缩小范围并专注于问题所在。这就是 jsFiddle 的优点 - 看看你是否可以在那里重现你的问题，我会看看它......