javascript - 用于文本输入的 AngularJS 指令 : focus on next input on Enter

Question

我想为 AngularJS 实现这样的指令:如果在输入 [文本] 中使用，在点击输入时焦点将移动到下一个输入。实现这一目标的最佳方法是什么？

我有一个非常大的表单，想实现一种快速遍历字段的方法。

Answer 1

检查这个 FIDDLE

AngularJS 中有 ngKeypress 指令，您可以在 here 中阅读更多内容.

如果您的表单如您所述是静态的，那么完成您需要的最简单方法是传递下一个输入的 ID(或在我的示例中为索引)。如何提供 ID 由您决定，您可以传递整个 ID 或索引。

<input type="text" ng-model="field1" id="f_1"
       ng-keypress="keypressHandler($event, 2)"/>
<br/>
<input type="text" ng-model="field2" id="f_2" 
       ng-keypress="keypressHandler($event, 3)"/>
<br/>

然后在你的 Controller 中，如果 key 是 enter，通过给定的 id 获取元素，然后聚焦它。

$scope.keypressHandler = function(event, nextIdx){
    if(event.keyCode == 13){
        angular.element(
            document.querySelector('#f_'+nextIdx))[0].focus();

    }
}

如您所见，您可以像这样使用 ng-repeat，方法是传递 $index 而不是硬编码数字并动态创建 id。