角度聚焦/聚焦输入元件

Question

我有三个输入元素作为按钮设置。在ng-keyup上，我在我的控制器中调用一个函数。

现在问题是我必须手动点击其中一个才能获得焦点，然后才能使用keyUp。

我尝试了ng-focus =＆＃39;焦点＆＃39;然后在控制器中设置$ scope.focus = true，它没有用。

  <div class="row startButtonRow">
    <div class="col col-50" align="center">
      <button class="button button-dark startButton" ng-click="start()" ng-disabled="disableStart">Start</button>
    </div>

    <div class="col" align="center">
      <input ng-focus="focus" type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
    </div>

    <div class="col" align="center">
      <input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
    </div>

    <div class="col" align="center">
      <input type="button" class="button button-dark startButton" ng-disabled="disableStop" ng-keyup="stopTimer($event)">
    </div>

  </div>

点击开始按钮后，符号开始出现在三列上，我应该在出现特定符号时按下相应的按钮（此处为带按键的输入元素）。我不想先点击元素，然后才能使用键盘键。

Answer 1

ng-keyup不一定要输入你的一个输入元素，你可以将它移动到你的body元素，或者你的ng-app元素，它仍然会捕获按键。

另一方面，我相信你误解了ng-focus的作用。当输入被聚焦时，它会评估给定的表达式，它不会告诉您的浏览器关注该元素。您需要构建自定义指令以集中输入，请参阅How to set focus on input field?

您可以在控制器中添加以下内容：

var handler = function(e){
    if (e.keyCode === 37) {
      // left arrow
    } else if (e.keyCode === 38) {
      // up arrow
    } else if (e.keyCode === 39) {
      // right arrow
    }
};

var $doc = angular.element(document);

$doc.on('keyup', handler);
$scope.$on('$destroy',function(){
  $doc.off('keyup', handler);
})