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）

有效的无线电选择或文本输入时，请关注下一个div

1 个答案: