Question

在HTML表单中，如何让iPad键盘上的return键表现为tab键？

我目前的解决方案是：

$('input[type=text]').keydown(function(e)
{
  if (e.keyCode == 13)
  {
    e.preventDefault();
    $(this).nextAll('input[type=text]:first').focus();
  }
});

我在下面的链接中找到了此解决方案，该解决方案适用于答案评论中包含的JSFiddle。

jQuery how to make Enter (Return) act as Tab key through input text fields but in the end trigger the submit button

此解决方案在我的情况下不起作用（在iPad或PC上）。根据评论，我认为可能是我的HTML结构造成了麻烦，虽然我不知道如何改变它以实现相同的布局。

如何才能使return键跳转到下一个输入字段？

我的表单的HTML块位于下方（跳过以避免长时间的HTML读取）：

<div class="row">
  <div class="span6">
    <div class="control-group" id="GuestName_group">
      <label class="control-label" for="textbox_Name"><i class="icon-user"></i> Guest Name</label>
      <div class="controls controls-row">
        <input type="text" class="span6" id="textbox_Name" data-provide="typeahead"  placeholder="Lastname, Firstname">
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="textbox_Group"><i class="icon-home"></i> Organization</label>
      <div class="controls controls-row">
        <input type="text" class="span6" id="textbox_Group" placeholder="Organization">
      </div>
    </div>
  </div>
  <div class="span6">
    <div class="control-group">
      <label class="control-label" for="select_Host"><i class="icon-star"></i> AOELab Host Name</label>
      <div class="controls controls-row">
        <select class="span6" id="select_Host">
          {% for person in host_names %}
          <option value="{{ person.bems }}">{{ person.name }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="textarea_Purpose"><i class="icon-question-sign"></i> Purpose</label>
      <div class="controls controls-row">
        <label class="radio inline">
          <input type="radio" name="optionsPurpose" id="radio_Purpose1" value="meeting" checked>
          Meeting
        </label>
        <label class="radio inline">
          <input type="radio" name="optionsPurpose" id="radio_Purpose2" value="tour">
          Tour
        </label>
        <label class="radio inline">
          <input type="radio" name="optionsPurpose" id="radio_Purpose3" value="other">
          Other...
        </label>
      </div>
      <div class="controls controls-row">
        <textarea class="span6" id="textarea_Purpose" placeholder="Why are you here?"></textarea>
      </div>
    </div>
  </div>
</div>

Answer 1

$('input[type=text]').on('keydown', function (e) {
    if (e.which == 13) {
        var tabables = $("*[tabindex != '-1']:visible"),
             index = tabables.index(this);

        tabables.eq(index + 1).focus();
        e.preventDefault();
    }
});

FIDDLE

将iPad的“Return”视为“Tab”

1 个答案: