当按下回车键时，如何禁用Tab键的按键事件？

Question

当按下回车键时，如何禁用Tab键的按键事件？

3

这是我目前的代码，它能正常运行。但我想要返回制表键而不是什么都不做。

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

What I want is:

if (event.keyCode == 13) {
    event.preventDefault();
    return event.keyCode = 9; <<= or something similar and simple
}

这似乎是一个重复的问题，但我没有看到任何可以替换Tab键代码的东西... Tab键已经知道跳过隐藏和使用Tab顺序。

- Daniel Yantis

我认为你所说的“返回制表键”是指你想要触发第二个事件，就好像按下了制表键一样。（你只是假设“返回”是实现这一点的方法。） - JDB

1

是的，两者都可以... 我觉得用 if key == 13 和 return code 9 替换会更紧凑一些。我必须防止默认的回车，为什么不用制表符呢？ - Daniel Yantis

2

我建议不要采用这种方法，因为它会打破用户对于表单输入和基本网络控件合理的浏览器可用性的预期。而且，如果你很关注视力受损的用户，这种方法也会对他们产生困惑。 - ManoDestra

1

我支持Mano的评论。当开发人员试图聪明地打破常见的用户体验期望时，这真的很让人恼火。 - JDB

@DanielYantis：完全理解你的想法，但一般来说，对于不寻常的行为，门槛可能需要比“为什么不”更高一些 :-) - T.J. Crowder

显示剩余4条评论

2个回答

1

我已经成功使用了被接受的答案，但是我需要弄清楚把代码放在哪里才合适：

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    if (event.keyCode == 13) {
        var fields = $(this).closest("form").find("input, textarea");
        var index = fields.index(this) + 1;

        fields.eq(
            fields.length <= index
                ? 0
                : index
        ).focus();
        event.preventDefault();
    }
});

- guero64

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

我猜你真正想要的是转到表单中的下一个字段。

如果是这样，你可以轻松找到下一个表单字段并使用.focus()来使其聚焦。例如：

var fields = $(this).closest("form").find("input, textarea");
var index = fields.index(this) + 1;
fields.eq(
  fields.length <= index
  ? 0
  : index
).focus();

例子：

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
  if (event.keyCode == 13) {
    event.preventDefault();
    var fields = $(this).closest("form").find("input, textarea");
    var index = fields.index(this) + 1;
    fields.eq(
      fields.length <= index
      ? 0
      : index
    ).focus();
  }
});

<form>
  <div>
    <label>
      Field 1:
      <input type="text">
    </label>
  </div>
  <div>
    <label>
      Field 2:
      <input type="text">
    </label>
  </div>
  <div>
    <label>
      Field 3:
      <input type="text">
    </label>
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如果您使用 tabindex 来使字段的顺序与文档顺序不同，那么您需要做更多的工作，基本上是在 tabindex 上对 find 的结果进行排序，并从那里开始工作。但这应该能让您朝着正确的方向前进。