Wie verwende ich ein Tastendruckereignis in AngularJS?

Ich möchte das Ereignis zum Drücken der Eingabetaste im Textfeld unten abfangen. Um es klarer zu machen, benutze ich a, ng-repeatum den Körper zu bevölkern. Hier ist der HTML:

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" 
    data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

Das ist mein Modul:

angular.module('components', ['ngResource']);

Ich verwende eine Ressource zum Auffüllen der Tabelle und mein Controller-Code lautet:

function Ajaxy($scope, $resource) {
//controller which has resource to populate the table 
}

Sie müssen Folgendes hinzufügen directive:

Javascript :

app.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });

                event.preventDefault();
            }
        });
    };
});

HTML :

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" my-enter="doSomething()">    
</div>

Eine Alternative ist die Verwendung der Standardrichtlinie ng-keypress="myFunct($event)"

Dann können Sie in Ihrem Controller:

...

$scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
    alert('I am an alert');
}

...

Mein einfachster Ansatz mit nur eckiger eingebauter Direktive:

ng-keypress, ng-keydownOder ng-keyup.

Normalerweise möchten wir Tastaturunterstützung für etwas hinzufügen, das bereits per ng-click verarbeitet wurde.

zum Beispiel:

<a ng-click="action()">action</a>

Fügen wir nun die Tastaturunterstützung hinzu.

Auslösen durch Eingabetaste:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 13 && action()">action</a>

durch Leertaste:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 32 && action()">action</a>

durch Leerzeichen oder Eingabetaste:

<a ng-click="action()" 
   ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

wenn Sie in einem modernen Browser sind

<a ng-click="action()" 
   ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

Weitere Informationen zu keyCode:
keyCode ist eine veraltete, aber gut unterstützte API. Sie können stattdessen $ evevt.key im unterstützten Browser verwenden.
Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Eine weitere einfache Alternative:

<input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/>

Und die ng-ui-Alternative:

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>

Folgendes habe ich herausgefunden, als ich eine App mit einer ähnlichen Anforderung erstellt habe: Es ist nicht erforderlich, eine Direktive zu schreiben, und es ist relativ einfach zu sagen, was sie tut:

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">

Sie können ng-keydown = "myFunction ($ event)" als Attribut verwenden.

<input ng-keydown="myFunction($event)" type="number">

myFunction(event) {
    if(event.keyCode == 13) {   // '13' is the key code for enter
        // do what you want to do when 'enter' is pressed :)
    }
}

html

<textarea id="messageTxt" 
    rows="5" 
    placeholder="Escriba su mensaje" 
    ng-keypress="keyPressed($event)" 
    ng-model="smsData.mensaje">
</textarea>

controller.js

$scope.keyPressed = function (keyEvent) {
    if (keyEvent.keyCode == 13) {
        alert('presiono enter');
        console.log('presiono enter');
    }
};

Sie können es auch auf einen Controller in einem übergeordneten Element anwenden. In diesem Beispiel können Sie eine Zeile in einer Tabelle durch Drücken der Aufwärts- / Abwärtspfeiltasten hervorheben.

app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) {
  $scope.index = 0; // row index
  $scope.data = []; // array of items
  $scope.keypress = function(offset) {
    console.log('keypress', offset);
    var i = $scope.index + offset;
    if (i < 0) { i = $scope.data.length - 1; }
    if (i >= $scope.data.length) { i = 0; }
  };
  $element.bind("keydown keypress", function (event) {
    console.log('keypress', event, event.which);
    if(event.which === 38) { // up
      $scope.keypress(-1);
    } else if (event.which === 40) { // down
      $scope.keypress(1);
    } else {
      return;
    }
    event.preventDefault();
  });
}]);


<table class="table table-striped" ng-controller="tableCtrl">
<thead>
    <tr>
        <th ng-repeat="(key, value) in data[0]">{{key}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''">
        <td ng-repeat="(key, value) in row">{{value}}</td>
    </tr>
</tbody>
</table>

Ich versuche es

ng-keypress="console.log($event)"
ng-keypress="alert(123)"

habe nichts für mich getan.

Seltsamerweise funktioniert das Beispiel unter https://docs.angularjs.org/api/ng/directive/ngKeypress , das ng-keypress = "count = count + 1" ausführt.

Ich habe eine alternative Lösung gefunden, bei der durch Drücken der Eingabetaste der ng-Klick der Schaltfläche aufgerufen wird.

<input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/>
<button id="button" ng-click="doSomething()">Done</button>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Informe your name:<input type="text" ng-model="pergunta" ng-keypress="pressionou_enter($event)" ></input> 
<button ng-click="chamar()">submit</button>
<h1>{{resposta}}</h1> 
</div>
<script>
var app = angular.module('myApp', []);
//create a service mitsuplik
app.service('mitsuplik', function() {
    this.myFunc = function (parametro) {
        var tmp = ""; 
        for (var x=0;x<parametro.length;x++)
            {
            tmp = parametro.substring(x,x+1) + tmp;
            } 
        return tmp;
    }
});
//Calling our service
app.controller('myCtrl', function($scope, mitsuplik) { 
  $scope.chamar = function() { 
        $scope.resposta = mitsuplik.myFunc($scope.pergunta); 
    };
  //if mitsuplik press [ENTER], execute too
  $scope.pressionou_enter = function(keyEvent) {
             if (keyEvent.which === 13) 
                { 
                $scope.chamar();
                }

    }
});
</script>
</body>
</html>

Dies ist eine Erweiterung der Antwort von EpokK.

Ich hatte das gleiche Problem, eine Bereichsfunktion aufrufen zu müssen, wenn die Eingabetaste in einem Eingabefeld gedrückt wird. Ich wollte aber auch den Wert des Eingabefeldes an die angegebene Funktion übergeben. Das ist meine Lösung:

app.directive('ltaEnter', function () {
return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
        if(event.which === 13) {
          // Create closure with proper command
          var fn = function(command) {
            var cmd = command;
            return function() {
              scope.$eval(cmd);
            };
          }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' ));

          // Apply function
          scope.$apply(fn);

          event.preventDefault();
        }
    });
};

});

Die Verwendung in HTML ist wie folgt:

<input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/>

Ein großes Lob an EpokK für seine Antwort.

Was ist damit?:

<form ng-submit="chat.sendMessage()">
    <input type="text" />
    <button type="submit">
</form>

Wenn Sie nun die Eingabetaste drücken, nachdem Sie etwas in Ihre Eingabe geschrieben haben, weiß das Formular, wie es damit umgeht.

Ein Beispiel für Code, den ich für mein Projekt gemacht habe. Grundsätzlich fügen Sie Ihrer Entität Tags hinzu. Stellen Sie sich vor, Sie haben Eingabetext. Bei der Eingabe des Tag-Namens erhalten Sie ein Dropdown-Menü mit vorinstallierten Tags zur Auswahl. Sie navigieren mit Pfeilen und wählen mit Enter:

HTML + AngularJS v1.2.0-rc.3

    <div>
        <form ng-submit="addTag(newTag)">
            <input id="newTag" ng-model="newTag" type="text" class="form-control" placeholder="Enter new tag"
                   style="padding-left: 10px; width: 700px; height: 33px; margin-top: 10px; margin-bottom: 3px;" autofocus
                   data-toggle="dropdown"
                   ng-change="preloadTags()"
                   ng-keydown="navigateTags($event)">
            <div ng-show="preloadedTags.length > 0">
                <nav class="dropdown">
                    <div class="dropdown-menu preloadedTagPanel">
                        <div ng-repeat="preloadedTag in preloadedTags"
                             class="preloadedTagItemPanel"
                             ng-class="preloadedTag.activeTag ? 'preloadedTagItemPanelActive' : '' "
                             ng-click="selectTag(preloadedTag)"
                             tabindex="{{ $index }}">
                            <a class="preloadedTagItem"
                               ng-class="preloadedTag.activeTag ? 'preloadedTagItemActive' : '' "
                               ng-click="selectTag(preloadedTag)">{{ preloadedTag.label }}</a>
                        </div>
                    </div>
                </nav>
            </div>
        </form>
    </div>

Controller.js

$scope.preloadTags = function () {
    var newTag = $scope.newTag;
    if (newTag && newTag.trim()) {
        newTag = newTag.trim().toLowerCase();

        $http(
            {
                method: 'GET',
                url: 'api/tag/gettags',
                dataType: 'json',
                contentType: 'application/json',
                mimeType: 'application/json',
                params: {'term': newTag}
            }
        )
            .success(function (result) {
                $scope.preloadedTags = result;
                $scope.preloadedTagsIndex = -1;
            }
        )
            .error(function (data, status, headers, config) {
            }
        );
    } else {
        $scope.preloadedTags = {};
        $scope.preloadedTagsIndex = -1;
    }
};

function checkIndex(index) {
    if (index > $scope.preloadedTags.length - 1) {
        return 0;
    }
    if (index < 0) {
        return $scope.preloadedTags.length - 1;
    }
    return index;
}

function removeAllActiveTags() {
    for (var x = 0; x < $scope.preloadedTags.length; x++) {
        if ($scope.preloadedTags[x].activeTag) {
            $scope.preloadedTags[x].activeTag = false;
        }
    }
}

$scope.navigateTags = function ($event) {
    if (!$scope.newTag || $scope.preloadedTags.length == 0) {
        return;
    }
    if ($event.keyCode == 40) {  // down
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 38) {  // up
        removeAllActiveTags();
        $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1);
        $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true;
    } else if ($event.keyCode == 13) {  // enter
        removeAllActiveTags();
        $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]);
    }
};

$scope.selectTag = function (preloadedTag) {
    $scope.addTag(preloadedTag.label);
};

CSS + Bootstrap v2.3.2

.preloadedTagPanel {
    background-color: #FFFFFF;
    display: block;
    min-width: 250px;
    max-width: 700px;
    border: 1px solid #666666;
    padding-top: 0;
    border-radius: 0;
}

.preloadedTagItemPanel {
    background-color: #FFFFFF;
    border-bottom: 1px solid #666666;
    cursor: pointer;
}

.preloadedTagItemPanel:hover {
    background-color: #666666;
}

.preloadedTagItemPanelActive {
    background-color: #666666;
}

.preloadedTagItem {
    display: inline-block;
    text-decoration: none;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 10px;
    color: #666666 !important;
    font-size: 11px;
}

.preloadedTagItem:hover {
    background-color: #666666;
}

.preloadedTagItemActive {
    background-color: #666666;
    color: #FFFFFF !important;
}

.dropdown .preloadedTagItemPanel:last-child {
    border-bottom: 0;
}

Ich bin ein bisschen spät dran .. aber ich habe eine einfachere Lösung gefunden mit auto-focus.. Dies könnte für Schaltflächen oder andere nützlich sein, wenn ich ein dialog:

<button auto-focus ng-click="func()">ok</button>

Das sollte in Ordnung sein, wenn Sie die Taste Leertaste onoder Eingabetaste drücken möchten .

Hier ist meine Anweisung:

mainApp.directive('number', function () {
    return {
        link: function (scope, el, attr) {
            el.bind("keydown keypress", function (event) {
                //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow
                if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) {
                    event.preventDefault();
                }
            });
        }
    };
});

Verwendungszweck:

<input number />

Sie können ng-keydown, ng-keyup und ng-press wie diesen verwenden.

eine Funktion auslösen:

   <input type="text" ng-keypress="function()"/>

oder wenn Sie eine Bedingung haben, z. B. wenn er Escape drückt (27 ist der Schlüsselcode für Escape)

 <form ng-keydown=" event.which=== 27?cancelSplit():0">
....
</form>

Ich denke, die Verwendung von document.bind ist etwas eleganter

constructor($scope, $document) {
  var that = this;
  $document.bind("keydown", function(event) {
    $scope.$apply(function(){
      that.handleKeyDown(event);
    });
  });
}

So erhalten Sie ein Dokument zum Controller-Konstruktor:

controller: ['$scope', '$document', MyCtrl]

(function(angular) {
  'use strict';
angular.module('dragModule', [])
  .directive('myDraggable', ['$document', function($document) {
    return {
      link: function(scope, element, attr) {
         element.bind("keydown keypress", function (event) {
           console.log('keydown keypress', event.which);
            if(event.which === 13) {
                event.preventDefault();
            }
        });
      }
    };
  }]);
})(window.angular);

Alles, was Sie tun müssen, um die Veranstaltung zu erhalten, ist Folgendes:

console.log(angular.element(event.which));

Eine Direktive kann es tun, aber so machen Sie es nicht.