Ist es möglich zu hören, für Pfeil keyspress mit ng-keypress?

Ich versuche, eine Interaktion erstellen, die ähnlich wie der konami code "up,up,down,down,a,b,a,b, enter" -> etwas passiert.

Ist es möglich zu hören, für Pfeil keyspress mit ng-keypress? es scheint nicht zu funktionieren?

html:

input( ng-keypress='changed($event)'  )

Js

$scope.changed = (evt) ->
    console.log(evt)

dieser nicht log-out-Taste-events?

Habe ich das roll-out meiner eigenen Listener für das Fenster? wenn ja, wie kann ich erreichen, das in eckige?

ich erstellte demo und seine Arbeitsmethoden in Ordnung.
ich versuche zu erkennen, die Pfeil-Tasten. es funktioniert gut, aber wie wollen Sie erkennen, wenn jemand drückt den Pfeil nach oben aus dem Eingabefeld

InformationsquelleAutor Matthew Harwood | 2014-08-23

  1. 21

    DEMO 

    $scope.key = function($event){
    console.log($event.keyCode);
    if ($event.keyCode == 38)
        alert("up arrow");
    else if ($event.keyCode == 39)
        alert("right arrow");
    else if ($event.keyCode == 40)
        alert("down arrow");
    else if ($event.keyCode == 37)
        alert("left arrow");
}

    BEARBEITEN

    Ändern Sie es von ng-keypress zu ng-keydown. DEMO

    <input ng-keydown="key($event)" />
    Interessanterweise bin ich bekomme keine Warnmeldungen während der Nutzung von google chrome? es funktioniert auf firefox lol?
    wird mark es richtig egal, aber tun Sie Sie wissen, wie man die keyCodes cross-browser?
    Getestet habe ich auf firefox, so lassen Sie mich versuchen, auf chrome.
    Überprüfen Sie meine aktualisierte Antwort.
    Hallo, irgendeine Idee, warum bin ich immer die falschen Werte in meinen keyCode 🙁 stackoverflow.com/questions/30128431/...

    InformationsquelleAutor Darshan P

  2. 1

    Könnten Sie eine benutzerdefinierte Richtlinie zu hören keydown und keypressed-events. Eine mögliche Umsetzung, die ich getestet habe, ist die folgende:

    var app = angular.module('app', []);

//a helper service to detect the arrow keys from the key codes
app.factory('keys', function() {
    var keysEnum = { left: 37, up: 38, right: 39, down: 40 };
    var theKeys =  [ keysEnum.left, keysEnum.up, keysEnum.right, keysEnum.down ];
    function isIn(val) {
        var isin = false
        if (theKeys.indexOf(val) >= 0) {
            isin = true;
        }
        return isin;
    }
    function keyFromCode(code) {
        var key = 'unknown';
        switch (code) {
            case 37:
                key = 'left';
                break;
            case 38:
                key = 'up';
                break;
            case 39:
                key = 'right';
                break;
            case 40:
                key = 'down';
                break;
        }
        return key;
    }
    return {
        isIn: isIn,
        keyFromCode: keyFromCode
    };
});

//custom directive to detect the arrow key pressed
app.directive('keypressed', [ 'keys', function (keys) {
    return function (scope, element, attrs) {
        //listen for the events keydown, keypress
        element.bind("keydown keypress", function (event) {
            var code = event.which;
            //if an arrow key is pressed then do something
            if(keys.isIn(code)) {
                console.log(keys.keyFromCode(code));
            }
        });
    };
}]);

    Können Sie mit der oben genannten Richtlinie wie diese:

    <span ng-app="app">
    <input keypressed />
</span>

    Vom code, den du gepostet hast scheint es, dass Sie ein html-template-engine, also in Ihrem Fall könnten Sie die Richtlinie so:

    input( keypressed )

    InformationsquelleAutor Panos Matzavinos

Schreibe einen Kommentar