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

在我的控制器中调用我的nextLine函数：

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

其中index是当前输入框索引。我需要一种方法来获取下一个HTML输入元素并在那里设置焦点。任何帮助表示赞赏。

Answer 1

根据我的经验，更多事件驱动的方法更适合于重点管理。将事件传递给nextLine方法。假设你只使用jQuery灯，你最终会得到这样的东西：

//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();
  }
}

Answer 2

首先，不建议在DOM事件监听器中使用多个指令实例。如果你有1000个指令听同样的＆＃34; keydown＆＃34;事件？那是疯了。

也许你应该用好的＆＃39; ol Jquery来解决这个问题：添加一个＆＃34; KEYDOWN＆＃34;事件监听器到容器元素，然后简单地遍历输入字段，每个＆＃34;返回＆＃34;按下。： Working demo here

模板的简化版本：

<div class="items-lists" on-return>
    <input type="text" ng-repeat="item in shoppingList" class="item-list">
</div>

然后在您的指令中：

angular.module('MyApp')
    .directive('onReturn', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                $(element).on("keydown keypress", function(event) {
                    if (event.which === 13) {
                        scope.nextLine();
                        event.preventDefault();
                    }
                });

                //get next html input element and set focus()
                scope.nextLine = function() {
                    var nextInput =  $(element).find('input:focus').next('input');
                    var firstInput = $(element).find('input')[0];
                    nextInput.length ? nextInput.focus() : firstInput.focus();
                }
            }
        }
    });

解决方案＃2：

另一种方法是使用接受布尔表达式的ng-focus。您可以为ng-repeat中的每个项目创建一个ng-click功能，将其设置为＆＃34;选择＆＃34;并取消选择其余的。然后评估输入字段中的item.selected以获得焦点：

<div class="items-lists">
    <input ng-repeat="item in shoppingList" ng-focus="item.selected" ng-click="selectItem(item)" class="item-list">
</div>

如何将注意力设置在ng-repeat生成的下一个输入字段上？

2 个答案: