AngularJS で Enter キーを検出するコード


テキストボックスなどで、Enter キーによるイベント処理を記述するコード例をいくつか。

$event オブジェクト

ng-keydownなどの directive を利用する際には、$eventでイベントオブジェクトを利用。

1
2
3
4
5
6
7
$scope.comments = [];
$scope.handleKeydown = function(e) {
  if (e.which !== 13) {
    $scope.comments.push($scope.newComment);
    $scope.newComment = '';
  }
}
1
2
3
4
<input type="text" ng-model="newComment" ng-keydown="handleKeydown($event)">
<ul>
  <li ng-repeat="comment in comments"></li>
<ul>

カスタム directive でのイベント処理

カスタム directive を定義する場合は、jQuery と同じような感じでバインド。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
myApp.directive('handleKeydown', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, modelCtrl) {
      element.bind('keydown', function(e) {
        if (e.which === 13) {
          scope.$apply(function() {
            scope.comments.push(scope.newComment);
            scope.newComment = '';
          });
        }
      });
    }
  };
});
1
<input type="text" ng-model="newComment" handle-keydown>

form(ng-form)の submit

最後に持ってきたものの、form の submit で実現することを真っ先に検討するのが吉。Enter キーも処理されるし、テキストボックスがたくさんあっても無問題。

1
2
3
<form ng-submit="handleKeydown()">
  <input type="text" ng-model="newComment">
</form>