web-dev-qa-db-fra.com

Comment puis-je détecter un événement keydown ou keydown dans angular.js?

J'essaie d'obtenir la valeur d'une zone de texte de numéro de téléphone portable pour valider sa valeur d'entrée à l'aide de angular.js. Je suis novice dans l'utilisation de angular.js et je ne sais pas trop comment implémenter ces événements et mettre du javascript pour valider ou manipuler les entrées de formulaire sur mon code html.

C'est mon HTML:

    <div>
        <label for="mobile_number">Mobile Number</label>
        <input type="text" id="mobile_number" placeholder="+639178983214" required
           ngcontroller="RegisterDataController" ng-keydown="keydown">
    </div>

Et mon contrôleur:

    function RegisterDataController($scope, $element) {
       console.log('register data controller');
       console.log($element);
       $scope.keydown = function(keyEvent) {
        console.log('keydown -'+keyEvent);
       };
    }

Je ne suis pas sûr de savoir comment utiliser l'événement keydown dans angular.js, j'ai également cherché comment l'utiliser correctement. Et puis-je valider mes entrées sur les directives? Ou devrais-je utiliser un contrôleur comme ce que j'ai fait pour utiliser les événements tels que keydown ou keypress?

htmltwitter-bootstrapangularjsangularjs-directive
33
abelski

Mise à jour:

ngKeypress, ngKeydown et ngKeyup font maintenant partie d'AngularJS.

<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">

<!-- or call a controller/directive method and pass $event as parameter.
     With access to $event you can now do stuff like 
     finding which key was pressed -->
<input ng-keypress="changed($event)">

Lire la suite ici:

https://docs.angularjs.org/api/ng/directive/ngKeypresshttps://docs.angularjs.org/api/ng/directive/ngKeydown - https://docs.angularjs.org/api/ng/directive/ngKeyup

Solutions antérieures:

Solution 1: Utilisez ng-change avec ng-model

<input type="text" placeholder="+639178983214" ng-model="mobileNumber" 
ng-controller="RegisterDataController" ng-change="keydown()">

JS:

function RegisterDataController($scope) {       
   $scope.keydown = function() {
        /* validate $scope.mobileNumber here*/
   };
}

Solution 2. Utilisez $watch

<input type="text" placeholder="+639178983214" ng-model="mobileNumber" 
ng-controller="RegisterDataController">

JS:

$scope.$watch("mobileNumber", function(newValue, oldValue) {
    /* change noticed */
});
50
AlwaysALearner

Vous étiez sur la bonne voie avec votre attribut "ng-keydown" sur l'entrée, mais vous avez manqué une étape simple. Ce n’est pas parce que vous placez l’attribut ng-keydown que angular sait quoi en faire. C’est là que les "directives" entrent en jeu. Vous avez utilisé l’attribut correctement, mais maintenant vous Il faut écrire une directive qui indiquera à angular ce qu'il faut faire quand il voit cet attribut sur un élément html.

Ce qui suit est un exemple de la façon dont vous feriez cela. Nous allons renommer la directive de ng-keydown à on-keydown _ (pour éviter de casser la "meilleure pratique" trouvée ici ):

var mod = angular.module('mydirectives');
mod.directive('onKeydown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
             // this next line will convert the string
             // function name into an actual function
             var functionToCall = scope.$eval(attrs.ngKeydown);
             elem.on('keydown', function(e){
                  // on the keydown event, call my function
                  // and pass it the keycode of the key
                  // that was pressed
                  // ex: if ENTER was pressed, e.which == 13
                  functionToCall(e.which);
             });
        }
    };
});

La directive simple dit à angular que, lorsqu'elle voit un attribut HTML appelé "ng-keydown", elle doit écouter l'élément qui possède cet attribut et appeler la fonction qui lui est transmise. Dans le code html vous auriez le suivant:

<input type="text" on-keydown="onKeydown">

Ensuite, dans votre contrôleur (comme vous l'avez déjà fait), vous ajouteriez une fonction à la portée de votre contrôleur appelée "onKeydown", comme suit:

$scope.onKeydown = function(keycode){
    // do something with the keycode
}

J'espère que cela vous aidera ou aidera quelqu'un d'autre à savoir

22
tennisgent

Code JavaScript utilisant ng-controller:

$scope.checkkey = function (event) {
  alert(event.keyCode);  //this will show the ASCII value of the key pressed

}

En HTML:

<input type="text" ng-keypress="checkkey($event)" />

Vous pouvez maintenant placer vos chèques et autres conditions en utilisant la méthode keyCode.

5
Prateek

Vous pouvez utiliser Angular UI @ http://angular-ui.github.io/ui-utils/ qui fournit des détails sur la fonction de rappel du gestionnaire d’événements pour la détection de la baisse de touche, keyup , appuyez sur la touche (également sur la touche Entrée, la touche Retour arrière, la touche Alt, la touche Contrôle)

<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>
5
JQuery Guru