Comment positionner un élément en dessous d'une zone de texte carret en javascript?

Question

J'ai un long champ de texte et ce que je veux faire est que lorsqu'un utilisateur tape un caractère '@', une liste d'utilisateurs apparaît comme une auto-complétion typique. Cependant, je veux que la liste des utilisateurs apparaisse au-dessous du caractère '@' qui pourrait être 20-30 caractères à partir du début de la zone de texte.

J'ai trouvé beaucoup de plugins jQuery auto-compléts mais aucun qui positionne la liste en dessous de la position actuelle du curseur.

Je peux obtenir la position du champ de texte en utilisant $('#textfield').position() et je peux obtenir la position du curseur en utilisant something like this mais qui obtient l'index de caractères à partir de la valeur du texte et non de la position du pixel.

Comment puis-je obtenir la position actuelle d'un champ de texte par rapport à la page en pixels afin de positionner un élément en dessous?

Answer 1

relayant sur cette anwsear: Calculate text width with JavaScript

ce que vous pouvez faire est d'avoir un div sur l'écran qui est visible: caché alors chaque fois qu'un nouveau charecter a été suggérée dans la zone de texte modifier le code HTML intérieur de la div Ainsi, la valeur de la zone de texte et le code interne div seront toujours synchronisés. Ensuite, lorsque vous souhaitez faire apparaître votre saisie semi-automatique, vous devez ajouter la largeur de la div. à la position décalage gauche de la zone de texte.

et thats it ...

et avcorse vous aurez besoin que la div et la zone de texte auront la même police ...

Answer 2

Ce plugin jQuery fait ce que vous êtes après:

http://plugins.jquery.com/project/caretPosition

Je ne l'ai pas testé, mais en passant par le code, il semble que cela crée un <span> temporaire avec le même contenu que votre <textarea> (jusqu'au curseur) et fait assumpti sauvage ons sur la police, la hauteur de la ligne, les espaces et le mot enveloppant lors de la mesure.

Vous pouvez essayer l'étendre à:

1. Copiez la police, la hauteur de la ligne, les espaces et mot styles wrap de la cible <textarea>

2. Masquer la <span>temporaire sans affecter la mesure par l'emballage dans un <div style="height: 0; overflow: hidden;"> ou le positionnant -9999px, -9999px

Answer 3

$(this).position().top ; 
$(this).position().left ; 
$(this).position().right ; etc... :-)