web-dev-qa-db-fra.com

Flouter un champ de saisie lors d’une pression sur une touche, entrez une valeur angulaire.

J'ai trouvé cette question très utile pour soumettre un formulaire lorsque quelqu'un appuie sur la touche "Entrée":

Javascript:

angular.module('yourModuleName').directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'event': event});
                });

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

HTML:

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

Ce que je voudrais savoir, c’est que le champ soit flou lorsque vous appuyez sur la touche "Entrée". À quoi ressemblerait doSomething() pour rendre flou le champ expéditeur 

J'aimerais laisser la directive ngEnter telle qu'elle est, car j'aimerais la réutiliser pour d'autres fonctions. 

Mise à jour: Je sais que je peux créer toute une directive juste pour le flou (c'est ainsi que je l'ai maintenant), mais ce que j'aimerais faire, c'est pouvoir faire quelque chose comme ceci:

<input type="text" ng-enter="this.blur()">

Ou comment puis-je passer l'élément actuel en tant que paramètre?

<input type="text" ng-enter="doBlur(this)">
angularjsblur
19
coopersita

Après avoir essayé un tas de choses, cela ne semble pas possible, car vous auriez besoin de passer $ event pour obtenir l'élément cible, donc une directive séparée semble être la seule solution:

Ce que nous désirons:

Vous ne pouvez pas transmettre this car il fait référence à la portée, vous devez donc passer l'événement.

<input type="text" ng-enter="doBlur($event)">

Une fois que vous avez l'événement, vous pouvez obtenir la cible.

$scope.doBlur = function($event){
    var target = $event.target;

    // do more here, like blur or other things
    target.blur();
}

Mais, vous ne pouvez obtenir l'événement pass que dans une directive telle que ng-click ... un peu insatisfaisant. Si nous pouvions passer $ event en dehors de la directive, nous pourrions brouiller de la manière réutilisable que vous aviez demandée.

22
SoluableNonagon

SoluableNonagon était très proche de celui-ci. Vous devez juste utiliser le bon argument. La directive a déclaré le paramètre d'événement event et non $event. Vous pouvez changer la directive pour utiliser $event comme le fait ngClick (ou vous le conservez et vous l'utilisez comme ng-enter="doSomething(event)".

angular.module("app", [])
  .controller('MainController', MainController)
  .directive('myEnter', myEnter);

function MainController() {
  var vm = this;
  vm.text = '';
  vm.enter = function($event) {
    $event.target.blur();
    vm.result = vm.text;
    vm.text = '';
  }
}

myEnter.$inject = ['$parse'];

function myEnter($parse) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      var fn = $parse(attr.myEnter, null, true);
      return function(scope, element) {
        element.on("keydown keypress", function(event) {
          if (event.which === 13) {
            
            // This will pass event where the expression used $event
            fn(scope, { $event: event });
            scope.$apply();
            event.preventDefault();
          }
        });
      };
    }
  };
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>

<div ng-app="app" ng-controller="MainController as view">
  <input my-enter="view.enter($event)" ng-model="view.text">
  <div ng-bind="view.result"></div>
</div>

4
hansmaad

pour Angular 2+ 

<input ... (keydown.enter)='$event.target.blur()'>
0
Aleksandr Skobeltcyn