0

如何使returniPad 键盘上的tab键在 HTML 表单中充当键？

我目前的解决方案是这样的：

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

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

这个解决方案在我的情况下不起作用（在 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>
4

1 回答 1

0 
$('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();
    }
});

小提琴

于 2013-04-08T21:21:28.403 回答