javascript - 当进行有效的单选选择或文本输入时，聚焦于下一个 div

Question

我有一个表格。每当用户在文本输入上按下回车键，或者当他们点击或单击单选按钮时，我希望能够将焦点设置到下一个 “formItem”div。

我的表单结构设置如下:

  <div class="formItem" ng-class="{'invalidField' : calculate.wasSkipped(calculationForm.nonsustainedVT)}">
    <ng-form name="nonsustainedVT" novalidate>
      <div class="header"><span class="title">3) Nonsustained VT </span></div>
      <div class="content">
        <div class="radioGroup">

          <div class="radio-wrapper">
            <input id="nonsustainedVTYes" type="radio" required name="nonsustainedVT" ng-value="true" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="4">
          </div>

          <div class="label-wrapper">
            <label for="nonsustainedVTYes">Yes</label>
          </div>
        </div>
        <div class="radioGroup">

          <div class="radio-wrapper">
            <input id="nonsustainedVTNo" type="radio" required name="nonsustainedVT" ng-value="false" ng-model="calculate.formData.nonsustainedVT" ng-click tabindex="5">
          </div>

          <div class="label-wrapper">
            <label for="nonsustainedVTNo">No</label>
          </div>
          <span class="radioValidationHack!" ng-show="false">{{calculate.formData.nonsustainedVT}}</span>
        </div>
      </div>
    </ng-form>
  </div> 

每个输入都有一个 tabindex，所以我正在考虑以某种方式使用它，但是一旦用户做出选择，我不希望将焦点移动到下一个 tabindex，因为它可能位于同一个单选组中。我希望将焦点设置到下一个“formItem”div。

请参阅以下 Plunkr 以获取更大的代码示例: http://plnkr.co/edit/FQzOFEZLi6ReAuJninxA?p=preview

Answer 1

您不需要选项卡索引，您可以使用表单内选项卡项目的顺序。我会创建一个像这样的 myFormItem 指令:

directive('myFormItem', function() {
  return {
    link: function(scope, element, attr) {
      var form = element.closest('form'),
        items = form.find('[my-form-item]'),
        index = items.index(element),
        nextFormItem = $(items[index+1]);

      element.find('input[type=radio]').on('click', function() {
        nextFormItem.find('input').focus();
      });

      element.find('input[type=text]').on('keypress', function(e) {
        if (e.which === 13) {
          nextFormItem.find('input').focus();
        }
      });
    }
  };
});

并且您需要将 my-form-item 属性添加到每个 .formItem (顺便说一句，您可能应该对类使用 kebab-case )