Comment puis-je obtenir les coordonnées de pixels (x, y) du curseur dans les zones de texte ?

Question

J'utilise jQuery et j'essaie de trouver un moyen multi-navigateur d'obtenir les coordonnées en pixels du curseur dans <textarea>sable input boîtes telles que je puisse placer un div positionné de manière absolue autour de cet emplacement.

Existe-t-il un plugin jQuery ?Ou un extrait de code JavaScript pour faire exactement cela ?

Answer 1

J'ai cherché un plugin de coordonnées caret textarea pour météore-complétion automatique, j'ai donc évalué les 8 plugins sur GitHub.Le gagnant est, de loin, zone de texte-caret-position depuis Composant.

Caractéristiques

• précision des pixels
• aucune dépendance
• compatibilité du navigateur :Chrome, Safari, Firefox (malgré deux insectes c'est le cas), IE9+ ;peut fonctionner mais n'a pas été testé sous Opera, IE8 ou version antérieure
• prend en charge n'importe quelle famille et taille de police, ainsi que les transformations de texte
• la zone de texte peut avoir un remplissage ou des bordures arbitraires
• pas confus par les barres de défilement horizontales ou verticales dans la zone de texte
• prend en charge les retours durs, les tabulations (sauf sur IE) et les espaces consécutifs dans le texte
• position correcte sur les lignes plus longues que les colonnes dans la zone de texte
• Non position "fantôme" dans l'espace vide à la fin d'une ligne lors du retour à la ligne de mots longs

Voici une démo - http://jsfiddle.net/dandv/aFPA7/

Comment ça fonctionne

Un miroir <div> est créé hors écran et stylisé exactement comme le <textarea>.Ensuite, le texte de la zone de texte jusqu'au curseur est copié dans le div et un <span> est inséré juste après.Ensuite, le contenu textuel du span est défini sur le reste du texte dans la zone de texte, afin de reproduire fidèlement l'habillage dans le faux div.

C’est la seule méthode garantie pour gérer tous les cas extrêmes liés à l’enroulement de lignes longues.Il est également utilisé par GitHub pour déterminer la position de son @ liste déroulante des utilisateurs.

Answer 2

Note:cette réponse décrit comment obtenir le coordonnées des personnages du curseur de texte/caret.Pour trouver les coordonnées des pixels, vous devrez étendre cela davantage.

La première chose à retenir est que le curseur peut être dans trois états

• un curseur d'insertion régulier à une position spécifique
• une sélection de texte qui a une certaine zone délimitée
• pas actif:la zone de texte n'a pas le focus.N'a pas été utilisé.

Le modèle IE utilise l'objet document.sélection, à partir de là, nous pouvons obtenir un Plage de texte objet qui nous donne accès à la sélection et donc à la ou aux positions du curseur.

Le modèle FF/Opera utilise les variables pratiques [input].selectionStart et selectionEnd.

Les deux modèles représentent un curseur actif régulier sous la forme d'une sélection de largeur nulle, la limite gauche étant la position du curseur.

Si le champ de saisie n’a pas le focus, vous constaterez peut-être qu’aucun n’est défini.J'ai eu beaucoup de succès avec le code suivant pour insérer un morceau de texte à l'emplacement actuel du curseur, remplaçant également la sélection actuelle, si elle est présente.Selon le navigateur exact, YMMV.

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

Remarque sur les bogues :les liens ne sont pas correctement balisés dans le paragraphe supérieur.

Objet de sélection : http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
Objet TextRange : http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

Je ne pense pas que cela puisse être fait dans tous les navigateurs.Quelqu'un l'a fait dans IE6, mais cela ne fonctionne pas dans FF ou Opera (AFAIK).Peut-être que vous pourrez le faire fonctionner dans tous les navigateurs.

Voici un article de blog de 2005.