javascript - 如何将焦点设置在 ng-repeat 生成的下一个输入字段上？

Question

我有一个使用 angularJS 和 ionic 的 iOS 应用程序。当按下“返回”按钮时，我试图将键盘焦点放在下一个输入字段上。这是 ng-repeat 所在的 HTML 代码:

            <div class="row item-list" ng-repeat="item in shoppingList">
                <div class="col col-10 col-check" ng-click="checkItem($index)">
                    <i class="icon ion-checkmark-round" ng-if="item.Action == 'check'"></i>
                </div>
                <div class="col col-memo" ng-click="updateMemo($index)">
                    <label class="item-list item-input">
                        <input id="inputText" type="text" placeholder="" ng-model="item.EventContent" on-return="nextLine($index)"/>
                    </label>
                </div>
            </div>

您可以在我的输入元素中看到我有“on-return="nextLine($index)""。我正在使用我的自定义指令，该指令在点击返回按钮时使用:

.directive('onReturn', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if (event.which === 13) {
            scope.$apply(function () {
                scope.$eval(attrs.onReturn);
            });
            event.preventDefault();
        }
    });
};
});

在我的 Controller 中调用我的 nextLine 函数:

myScope.nextLine = function (index) {
    //get next html input element and .setFocus()
}

其中index为当前输入框索引。我需要一种方法来获取下一个 HTML 输入元素并将焦点设置在那里。感谢您的帮助。

Answer 1

根据我的经验，更多的事件驱动方法更适合焦点管理。将事件传递给您的 nextLine 方法。假设你只使用 jQuery light，你最终会得到这样的结果:

//add closest method to jQuery light
$.fn.closest = function (selector) {
  var el = this[0];
  while (el && self.matches(el, selector)) {
    el = el.parentElement;
  }
  return $(el);
};

myScope.nextLine = function (event) {
  var nextInput = $(event.target).closest("[ng-repeat]").find("input");
  if(nextInput[0]){
    nextInput[0].focus();
  }
}