La position de Caret ne suit pas ?

Question

Ce que j'essaie de faire, c'est de mettre les codes clés dans un tableau, pour faire des choses intéressantes plus tard. Je capture donc les frappes, j'obtiens la position du curseur et je place le code de la touche dans le tableau (avec l'aide de MooTools) :

var keyArray = [];
$('form').addEvent('keyup', function(event) {
    var pos = document.activeElement.getCaretPosition();

    keyArray[pos] = event.code;
});

D'une manière générale, cela fonctionne très bien. Cependant, j'ai remarqué quelques undefined dans mon tableau lorsque j'affiche le tableau complet dans ma console. En approfondissant la question, j'ai découvert que lorsque l'on tape rapidement, la position du caret semble perdre le fil, ou être rapide/lent à répondre. J'ai créé un jsfiddle pour démontrer cela : http://jsfiddle.net/HQVR8/1/

Si vous tapez rapidement dans cet exemple, vous obtiendrez une séquence de position du curseur comme suit

- 1 - 2 - 3 - 5 - 6 - 6.

Mais lorsque l'on tape lentement, c'est

- 1 - 2 - 3 - 4 - 5 - 6. 

Bien sûr, le problème qui se pose maintenant lorsque je tape rapidement, c'est que j'ai un undefined dans mon tableau et j'écrase un élément du tableau. Le résultat est donc différent.

Ma question est de savoir si je peux d'une manière ou d'une autre faire en sorte que la position du caret en garde la trace. J'ai essayé d'utiliser la fonction "native" de selectionStart mais les résultats sont les mêmes. J'ai également essayé de capturer la position du curseur dans un fichier keydown et de le placer dans un tableau dans la page keyup événement. Aucune différence. Je me demande si l'utilisation de petites pauses (c'est-à-dire le fait de forcer l'utilisateur à taper plus lentement) pourrait résoudre le problème, mais cela ressemble à un piratage et je préférerais une solution "appropriée". J'espère qu'il y en a une.

Answer 1

Vous êtes en train de faire un gâchis en utilisant un tableau au lieu d'un objet.

Les index des tableaux sont douteux et peuvent créer des sparse arrays si vous ne faites pas attention, par exemple :

var foo = [];
foo[0] = "one!"; // foo.length = 1;
foo[2] = "two!"; // foo.length = 3, foo[1] = undefined

donc si vous tapez trop vite et sautez la valeur de retour, c'est probablement ce qu'il fait. de plus, le collage, etc. peut faire descendre le curseur plus bas...

vous pouvez probablement utiliser un objet, bien qu'il n'y ait aucune garantie sur l'ordre des clés d'entrée par rapport aux clés de sortie dans tous les navigateurs - en particulier webkit, qui a tendance à réorganiser et à placer les clés numériques en haut des boucles de clés d'objets... mais si vous préfixez la clé comme "pos" + caretIndex, vous devriez obtenir FIFO

une façon de résoudre votre besoin d'extraire les codes réels sans les indéfinis est d'utiliser Array.filter.

eg.

retArray = Array.filter(retArray, function(el) {
    return el !== undefined;
});

Avec un objet, vous pouvez simplement faire :

console.log(Object.values(foo));

Answer 2

Après quelques tests supplémentaires, il semble qu'il s'agisse d'un comportement propre à keyup . Lorsque j'utilise keydown I do obtenir une séquence cohérente : http://jsfiddle.net/HQVR8/3/

L'un des inconvénients est que keydown est un pas en arrière keyup lorsque vous procédez à la "collecte de valeurs" que je fais, mais dans mon contexte, il ne s'agit que d'un problème mineur.

La différence de comportement me semble étrange : lorsque vous appuyez sur quatre touches à la fois, la fonction keyup affiche la même position du curseur pour chacun d'entre eux, tandis que keydown montre quatre positions distinctes du caret. Cela semble étrange, car vous appuyez sur les touches en même temps, mais vous les enfoncez également en même temps, de sorte que les "lectures" du curseur devraient être les mêmes.

Answer 3

Allez sur le site JSfiddle et modifiez-le :

a) appuyer sur 'q', puis sur 'w', puis relâcher 'q', puis relâcher 'w' (assez rapidement pour éviter la répétition automatique). Ce type de séquence se produit assez souvent lorsque vous tapez "rapidement" avec plus d'un doigt :).

b) laisser une touche enfoncée suffisamment longtemps pour que la répétition automatique se mette en marche.

Les différences sont visibles

En principe, keyUp se déclenche lorsque la clé physique est relâchée, mais

• une autre touche peut être enfoncée avant que la précédente ne soit relâchée
• keyDown est appelé en cas de répétition automatique, tandis que keyUp n'est pas

Étant donné que la position de la carotte et les mises à jour de la zone de texte sont synchronisées avec la fonction keyDown vous manquerez simplement les étapes intermédiaires lors de la surveillance. keyUp .

Dans le cas (a), le keyUp Le gestionnaire voit la position de la carotte passer de 0 à 2 lorsque la touche 'q' est relâchée, car deux caractères ont été tapés avant que la première touche ne soit relâchée. Le relâchement de 'w' ne modifie pas la position du carret, de sorte que le gestionnaire finit par stocker q et w à la position 2.

Dans le cas (b), le gestionnaire ne tient pas compte des répétitions et ne stocke que la dernière occurrence de la clé.

En conclusion, l'utilisation de KeyUp n'atteindra jamais le sens voulu.

keyDown pourrait, mais personnellement je préférerais accrocher le changed événement.

Je pense qu'il n'est pas moins fiable de détecter un robot remplissant le champ (après tout, un utilisateur légitime pourrait aussi vouloir coller le mot de passe), et vous n'aurez pas à vous embêter avec des touches de contrôle comme le retour arrière ou tout autre moyen non clavier d'effacer la saisie.

Vous pouvez utiliser keyUp en tant que contrôle paranoïaque supplémentaire, tant que vous ne vous attendez pas à reconstruire l'entrée exacte. Par exemple, vous pourriez simplement vérifier que la touche relâchée correspond au caractère à la position actuelle du curseur. Mais franchement, je ne suis pas sûr que cela vaille la peine.