输入密钥返回标签键上的HTML5表单

时间:2016-08-24 18:18:12

标签: javascript

这就是我所拥有的,它运作良好。 但我想返回tab键而不是什么都没发生。

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

我想要的是:

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

这似乎是重复但我没有看到任何替代输入标签代码... Tab键已经知道跳过隐藏和使用标签顺序。

1 个答案:

答案 0 :(得分:2)

我怀疑你真正想要的是移动到表单中的下一个字段。

如果是这样,您可以轻松找到下一个表单字段,并使用.focus()来关注它。例如:

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

示例:

&#13;
&#13;
$(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;
    var field;
    fields.eq(
      fields.length <= index
      ? 0
      : index
    ).focus();
  }
});
&#13;
<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>
&#13;
&#13;
&#13;

如果您使用tabindex按照与文档顺序不同的顺序放置字段,则您需要做更多的工作,基本上对find的结果进行排序tabindex并在那里工作。但这应该让你走得更好。