Question

我试图创建一个directive来控制＆＃34;两个输入框（在使用ng-repeat创建的页面上将有几个这些指令）。我无法找到解决方案的功能是focus。

输入框需要在每个指令中切换它们之间的焦点（即，一旦我选择一个输入框并按下回车键，焦点需要转到它＆＃34; sibling＆＃34;输入，按下输入并重点回到第一次输入等）。 Focus永远不会留下指令（即两个输入框中的一个），除非我在另一个指令中选择另一个输入。

这种行为是否有优雅的AngularJS解决方案？或者，如果没有，是否有任何解决方案不涉及jQuery？

Answer 1

你可以做到的一种方法是在keypress上绑定一个监听器，这将$broadcast该事件。同一个指令可以监听该事件，匹配以确保它与focus之前广播事件的元素不同。

.directive('myDirective', function(){
  return {
    scope: true, // necessary for use with ng-repeat
    link: function(scope, elem, attrs) {
      scope.$on('enter', function($event, argElem){
        if (elem !== argElem) elem[0].focus();
      });
      elem.on('keypress', function($event){
        if ($event.keyCode === 13) {
          scope.$parent.$broadcast('enter', elem);
        }
      });
    }
  }
})

注意：从原始回复更新，以便与ng-repeat一起使用

Demo

Answer 2

ASSOCIATED SAMPLE with ng-repeat usage

您可以创建一个指令，该指令将接受按Enter键时可以聚焦的元素的id。只需使用document.getElementBy或$document[0].getElementById（用于测试目的）即可获得要关注的元素。将事件keypress绑定到指令的当前元素上下文，并在按Enter键时触发元素焦点。

e.g。

<强> JAVSCRIPT

.directive('simpleNextFocus', function(/*$document*/) {
  return function(scope, elem, attr) {
    if(attr.simpleNextFocus) {
      elem.on('keydown', function(e) {
          if(e.keyCode == 13) {
            // $document[0].getElementById(attr.simpleNextFocus).focus();
            document.getElementById(attr.simpleNextFocus).focus();
          }
        });
    }
  };
})

<强> HTML

<input type="text" id="input-1" simple-next-focus="input-2">
<input type="text" id="input-2" simple-next-focus="input-1">

在两个输入字段之间切换焦点的指令

2 个答案: