Wie benutzt man ein Tastendruckereignis in AngularJS?

Ich möchte das Eingabetaste-Presseereignis in der folgenden Textbox abfangen. Um es klarer zu machen, verwende ich eine ng-repeat , um den tbody zu bevölkern. Hier ist der HTML:

  

Das ist mein Modul:

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

Ich verwende eine Ressource, um die Tabelle zu füllen, und mein Controller-Code ist:

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

Sie müssen eine directive wie folgt hinzufügen:

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 :

 

Eine Alternative ist die Standard-Direktive 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 einfacher Ansatz, der nur eine eckige Einbaustrategie verwendet:

ng-keypress , ng-keydown oder ng-keyup .

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

zum Beispiel:

 action 

Jetzt fügen wir Tastaturunterstützung hinzu.

Auslöser mit Eingabetaste:

 action 

mit Leerzeichen:

 action 

durch Leerzeichen oder Enter-Taste:

 action 

wenn Sie in einem modernen Browser sind

 action 

Mehr über Schlüsselcode:
keyCode ist eine veraltete, aber gut unterstützte API, Sie könnten 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:

  

Und die ng-ui Alternative:

  

Hier ist, was ich herausgefunden habe, als ich eine App mit einer ähnlichen Anforderung erstellt habe, es erfordert nicht das Schreiben einer Direktive und es ist relativ einfach zu sagen, was es tut:

  

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

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

html

  

controller.js

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

Versuchen

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

hat nichts für mich getan.

Strangley die Probe bei https://docs.angularjs.org/api/ng/directive/ngKeypress , die ng-keypress = “count = count + 1”, funktioniert.

Ich habe eine alternative Lösung gefunden, die durch Drücken der Eingabetaste den NG-Klick der Schaltfläche aufruft.

   

Sie können es auch auf einen Controller auf einem übergeordneten Element anwenden. Dieses Beispiel kann verwendet werden, um eine Zeile in einer Tabelle durch Drücken der Pfeiltasten auf / ab zu markieren.

 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(); }); }]); 
{{key}}
{{value}}

Dies ist eine Erweiterung der Antwort von EpokK.

Ich hatte das gleiche Problem, eine Scope-function aufrufen zu müssen, wenn Enter auf ein Eingabefeld gedrückt wird. Ich wollte aber auch den Wert des Eingabefeldes an die angegebene function ü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:

  

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

Was ist damit?

 

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

 < !DOCTYPE html>    
Informe your name:

{{resposta}}

Ein Beispiel für Code, den ich für mein Projekt erstellt habe. Grundsätzlich fügst du deiner Entität Tags hinzu. Stellen Sie sich vor, Sie haben Eingabetext, bei der Eingabe des Tagnamens erhalten Sie ein Drop-Down-Menü mit vorinstallierten Tags zur Auswahl, Sie navigieren mit Pfeilen und wählen mit Enter:

HTML + AngularJS v1.2.0-rc.3

   

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 .. aber ich fand eine einfachere Lösung mit auto-focus .. Dies könnte nützlich sein für Schaltflächen oder andere, wenn Sie einen dialog :

Das sollte in Ordnung sein, wenn Sie die Taste on Space oder Enter clicks drücken möchten.

Hier ist meine statement:

 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(); } }); } }; }); 

Verwendung:

  

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

um eine function zu triggern:

   

oder wenn du eine Bedingung hast, wie wenn er auf Escape drückt (27 ist der Schlüsselcode für die Flucht)

  
....

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

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

So rufen Sie das Dokument zum Controller-Konstruktor auf:

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

Wie wäre es nur