将 Enter 从提交更改为 Tab？答案

【问题标题】：Change Enter from submission to Tab?将 Enter 从提交更改为 Tab？
【发布时间】：2010-12-20 22:20:33
【问题描述】：

用户不喜欢 Enter 键提交页面的事实。所以我的任务是阻止提交并将 Enter 键更改为 Tab 到下一个字段。

我尝试了很多在网上找到的 javascript sn-ps，但到目前为止都没有。唯一一个甚至接近产生效果的是 jQuery API 的 e.preventDefault()，它会停止提交，但我没有尝试过模拟选项卡行为。

e.returnValue = false;
e.cancel = true;

页面仍然在 keydown 事件处理程序中提交上述内容。与 keydown 事件处理程序中的 return false 效果相同。处理程序正在触发，通过使用 firebug 在其中放置断点进行测试。

这需要在 IE 和 Firefox 中都可以使用。

不要说“不要这样做”。
1）我已经确信我不应该这样做，但这不是我的选择，所以讨论是无声的。
2) 这将是对“我应该这样做吗？”这个问题的回答，这不是我要问的问题。

【问题讨论】：

为什么不用e.preventDefault()停止提交，然后用别的东西转移焦点？毕竟，您可以将多个操作放入事件处理程序中。
应该比较容易确定当前哪个元素有焦点。因此，接下来应该关注什么元素。然后您可以手动将焦点设置到该元素。
每隔一段时间我就有一个客户提出这个要求。我总是指出，很少有网站这样做，原因很简单：这是出乎意料的行为。甚至谷歌也接受输入键作为表单提交。我再也没有人问过。
@Waxolunist & @Chris，如果你不能回答他的问题，请不要说什么。我一直站在亚伦的立场上，得到这样的回复真的很令人沮丧。此外，一些客户的员工来自“绿屏”环境，他们习惯于在字段之间按 Enter，而不是 Tab。 Web 应用程序的要求是保持相同的行为。
查看链接到此example showing how to emulate enter as tab 的this answer。这是一个名为 PlusAsTab 的可重用插件，使用 CSS 类或 HTML5 data-* 属性来标记您想要该功能的字段/表单/容器。

标签： javascript asp.net

【解决方案1】：

这感觉有点恶心，但您可以使用event.preventDefault，然后在下一个最接近的输入上调用focus()：

这是一个简单的例子：

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).next("input").focus();
    }
});

示例：http://jsfiddle.net/andrewwhitaker/Txg65/

更新：如果您的输入之间有元素，则使用纯 next() 将不起作用。相反，请使用nextAll():

$("input").bind("keydown", function(event) {
    if (event.which === 13) {
        event.stopPropagation();
        event.preventDefault();
        $(this).nextAll("input").eq(0).focus();
    }
});

http://jsfiddle.net/andrewwhitaker/GRtQY/

【讨论】：

另外，对于 IE，您需要使用 event.cancelBubble = true 以便它不会冒泡（并将表单或选项卡提交到下一个输入）。见quirksmode.org/js/events_order.html#link9。
感谢您的提示，添加了event.stopPropagation()，我相信它可以在 IE/FF 中使用，因为它是 jquery 事件对象上的一个函数。
+1 让我走上正轨，但我认为这不起作用，因为我在输入框之间有东西。以前从未使用过小提琴，但我认为这应该表明我的意思：jsfiddle.net/xpxB6 虽然能够获得解决方案，但现在发布。
@AaronLS：很好，我已经扩展了示例以包含该案例，请参考答案。
我已经将类似的功能放入一个 jQuery 插件中，以防您想要一个可重用的解决方案。

【解决方案2】：

$("input").bind("keydown", function(event) {

    if (event.which === 13 && this.type !== 'submit') {
        event.preventDefault();
        $(this).next("input").focus();
    }
});

【讨论】：

【解决方案3】：

根据这篇文章： http://forum.jquery.com/topic/how-to-find-next-node-in-focus-order

我想出了这个。我最终选择不使用 focasables，而是使用输入来获得我想要的效果。 .not 是为了防止图片按钮和提交按钮被影响，这样当它们有焦点时，它们仍然有默认的输入时提交的动作。

$(document).ready(function() {
var focusables = $(":input").not('[type="image"]').not('[type="submit"]');

  focusables.keydown(function(e) {
    if (e.keyCode == 13) {
      e.preventDefault();
      var current = focusables.index(this),
              next = focusables.eq(current + 1).length ? focusables.eq(current + 1) : focusables.eq(0);
      next.focus();
    }
  });
});

【讨论】：