Question

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

我已尝试过在网上找到的许多javascript片段，但到目前为止还没有。唯一一个甚至接近产生效果的是jQuery API的e.preventDefault（），它停止了提交，但我没有尝试过模拟选项卡的行为。

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

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

这需要适用于IE和Firefox。

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

Answer 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/

Answer 2

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

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

Answer 3

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

我想出了这个。我最终选择不使用focasable，而是使用输入来获得我想要的效果。 .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();
    }
  });
});

将Enter从提交更改为Tab？

3 个答案: