it-swarm.com.de

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 einen ng-repeat, um den Körper zu füllen. Hier ist das 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>

Dies ist mein Modul:

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

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

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

Sie müssen ein 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:

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

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

Dann können Sie in Ihrem Controller Folgendes haben:

...

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

...
335
Chris Reynolds

Mein einfachster Ansatz mit nur angular eingebauter Direktive:

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

Normalerweise möchten wir Tastaturunterstützung für etwas hinzufügen, das bereits von ng-click behandelt wird.

zum Beispiel:

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

Fügen wir nun die Tastaturunterstützung hinzu.

auslösung durch Enter-Taste:

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

mit der 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 sich in einem modernen Browser befinden

<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 in einem unterstützten Browser verwenden.
Weitere Informationen finden Sie in https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

170
Eric Chen

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 erstellte. 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">
19
marcinzajkowski

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 :)
    }
}
15
Fineas

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');
    }
};
<!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>
3
Marcus Poli

Sie können es auch auf einen Controller eines übergeordneten Elements anwenden. In diesem Beispiel können Sie eine Zeile in einer Tabelle durch Drücken der Aufwärts-/Abwärtspfeiltasten 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();
  });
}]);


<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>
3
will Farrell

Versuchen

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 ausgelöst wird.

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

Dies ist eine Erweiterung der Antwort von EpokK.

Ich hatte das gleiche Problem, eine Scope-Funktion aufrufen zu müssen, wenn die Eingabetaste auf ein Eingabefeld gedrückt wird. Ich wollte aber auch das 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.

2
tassaert.l

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.

1
Juan Moreno

Ich finde die Verwendung von document.bind etwas eleganter

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

So leiten Sie das Dokument an den Controller-Konstruktor weiter:

controller: ['$scope', '$document', MyCtrl]
0
FreshPow
(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);
0
Mukundhan

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. Navigieren Sie mit den Pfeilen und wählen Sie mit der Eingabetaste:

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;
}
0
Dmitri Algazin

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

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

Das sollte in Ordnung sein, wenn Sie die Schaltfläche onSpace oder Enter clicks drücken möchten.

0
Abdellah Alaoui

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 />
0
WtFudgE

sie können ng-keydown, ng-keyup oder ng-press wie folgt verwenden.

um eine Funktion auszulösen:

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

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

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

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

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

Eine Anweisung kann es tun, aber das ist nicht wie Sie es tun.

0
Konkret