0

HTML フォームでreturniPad のキーボードのキーをキーとして動作させるにはどうすればよいですか?tab

私の現在の解決策はこれです：

$('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 に答える