web-dev-qa-db-fra.com

Angularjs: événement de focus sur le terrain?

j'utilise angularjs et j'ai créé un champ de saisie normal comme celui-ci:

<input type="text" style="border: none" ng-model="model" >

je veux faire ce qui suit:

si quelqu'un clique dans le champ de saisie, je souhaite appeler par exemple la méthode A. Ensuite, il écrit le texte dans ce champ et si la personne clique quelque part sur ma page pour que le champ de saisie ne soit plus ciblé, elle doit appeler la méthode B. Est-ce possible? avec angularjs? Si oui, comment puis-je le faire? ng-focus n'est actif que lors de l'événement d'entrée mais pas à la sortie.

je veux verrouiller quelque chose avec ceci, la méthode A définit uniquement une valeur sur true et la méthode B définit la même valeur sur false. mais je dois savoir quand le champ de saisie est actif et quand non.

javascripthtmlangularjsangularjs-directive
33
user2115378

Vous regardez ng-focus et ng-blur .

<input type="text" style="border: none" ng-model="model" ng-focus="A()" ng-blur="B()">

Sur une note de côté, utilisez des classes CSS au lieu de styles inline .. :)

Ou appelez simplement la même méthode avec argument et définissez la valeur acc: -

 <input type="text" style="border: none" ng-model="model" ng-focus="A(true)" ng-blur="A(false)">
51
PSL

Si vous utilisez une fonctionnalité que vous souhaitez appliquer aux champs de votre application, vous pouvez l'insérer dans une directive. Voici un exemple qui ajoute et supprime une classe CSS basée sur le focus ou le flou d'un champ:

angular.module('myApp').directive('inputFocus', function () {

var FOCUS_CLASS = 'input-focused';
return {
  restrict: 'A',
  priority: 1,
  require: 'ngModel',
  link: function (scope, element, attrs, ctrl) {
    element.bind('focus',function () {
      element.parent().addClass(FOCUS_CLASS);    
    }).bind('blur', function () {
      element.parent().removeClass(FOCUS_CLASS);
    });
  }
};
});
5
Leo Farmer

Vous pouvez lier la méthode B à la directive ng-blur de angular pour détecter le moment où une entrée perd le focus.

<input type='text' ng-focus='methodA()' ng-blur='methodB()' ng-model='model'>
3
Brian