Comment simuler une pression de touche tab angulaire

Je suis intéressé à faire une très simple auto de tabulation de la fonction. J'aimerais par programmation appuyez sur la touche "tab" pour le visiteur. Je n'arrive pas à trouver comment accomplir cela en standard JS (c'est à dire - ne pas utiliser jQuery .trigger()).

Utilisation: <input auto-tab="3">

directive('autoTab', [function () {
        return {
            restrict: "A",
            scope: false,
            link: function (scope, el, attrs) {
                el.bind('keyup', function () {
                    if (el.val().length >= attrs.autoTab) {
                        //document.dispatchEvent();
                    }
                });
            }
        }
    }])

InformationsquelleAutor Webnet | 2013-09-25

angularjs events

5

Je ne pense pas que c'est possible. Découvrez ce post et cette SORTE de question:

Noter que manuellement déclencher un événement à ne pas générer de la valeur par défaut
l'action associée à cet événement. Par exemple, manuellement en tirant une
focus événement n'entraîne pas l'élément reçoit le focus (vous devez utiliser
sa méthode focus pour ça), manuellement tir d'un événement d'envoi n'a pas
soumettre un formulaire (utiliser la méthode submit), manuellement tir un événement clé
ne cause pas de lettre pour apparaître dans un concentré de saisie de texte, et
manuellement tir d'un événement de clic sur un lien ne fait pas en sorte que le lien
activé, etc. Dans le cas des événements de l'UI, ce qui est important pour
des raisons de sécurité, car il empêche les scripts de simuler les actions de l'utilisateur
qui interagissent avec le navigateur lui-même.

Vous pourriez essayer une approche différente: changer votre directive, de sorte qu'il reçoit l'id de l'élément qui doit être porté suivante:
```
app.directive('autoTabTo', [function () {
  return {
    restrict: "A",
    link: function (scope, el, attrs) {
      el.bind('keyup', function(e) {
        if (this.value.length === this.maxLength) {
          var element = document.getElementById(attrs.autoTabTo);
          if (element)
            element.focus();
        }
      });
    }
  }
}]);
```
Et puis vous pouvez l'utiliser comme ceci:
```
<input type="text" id="input1" auto-tab-to="input2" maxlength="5"/>
<input type="text" id="input2" auto-tab-to="input1" maxlength="3"/>
```
De travail démo ici.

Ce n'est pas exactement ce que vous voulez, mais j'ai peur que cela n'est pas possible de le faire en simulant une touche de TABULATION.
- Ne devriez-vous pas utiliser d'élément[0].focus() pour supprimer le jQuery de dépendance?
- Vous avez raison. J'ai totalement raté en arrière quand j'ai posté la réponse. Va le corriger. Merci!
- Je viens de vérifier: le code est bon: element n'est pas un objet jQuery, afin de l'appelant .focus() directement est bien.
- C'est ce que je pensais, mais ça ne semble pas fonctionner pour moi, j'ai cette erreur: TypeError: Object [object object] n'a pas de méthode "focus". Avez-vous testé sans jQuery? Toute idée de ce que peut-être tort, de mon côté?
- Êtes-vous à l'aide de jQuery afin d'obtenir l'élément du DOM? Le code ci-dessus utilise document.getElementById, pas $(). Dans le cas où vous êtes, alors vous devriez le faire element[0].focus() comme vous l'avez mentionné plus tôt.
- Désolé mon scénario est un peu différent et j'ai été tout simplement à l'aide de l'élément passé dans la fonction de lien, viens de réaliser que maintenant. C'est celui que l'accent ne semble pas fonctionner pour moi.
InformationsquelleAutor Michael Benford

je pense que c'est mieux pas nécessaire de mentionner l'id de l'élément d'entrée

app.directive('autoTabTo', [function () {
  return {
    restrict: "A",
    link: function (scope, el, attrs) {
    el.bind('keyup', function(e) {
       if (this.value.length === this.maxLength) {
                 var inputs = $(this).closest('form').find(':input');
                 inputs.eq( inputs.index(this)+ 1 ).focus();
        }
      });
    }
   }
}]);

Nice intelligent peu de code, mais il a encore un jQuery dépendance. La partie intérieure peut être réécrite ainsi: var inputs = elem.closest('form').find(':input'); inputs.eq( inputs.index(elem)+ 1 ).focus();

InformationsquelleAutor Pranay Dutta

-1

Selon le degré de prise en charge du navigateur vous avez besoin, dispatchEvent() pourrait faire l'affaire pour vous.

InformationsquelleAutor Stephen Thomas

Vous devez vous connecter pour publier un commentaire.