Comment obtenir la position du curseur de texte à l'aide javascript

Question

ceci est mon code, je remplis l'espace tout en div, (utilisation jquery):

<div id="a" style="position:absolute;top:300px;width:100px;height:100px;background:red;color:black;word-wrap:break-word;"> 
    <div id='a2' contenteditable=true ></div> 
</div> 
<script type="text/javascript"> 
    String.prototype.repeat = function(n) { 
     return new Array(1 + parseInt(n, 10)).join(this); 
    } 

    var s=$('#a').width()/4*$('#a').height()/19; 
    $('#a2').html('&nbsp;'.repeat($('#a').width()/4*parseInt($('#a').height()/19))) 

    $('#a2').click(function(){ 
     alert('sss') 
    }) 

</script> 

alors comment puis-je obtenir la position du curseur de texte lorsque je clique quelque part dans ' a2' div

la démo est http://jsfiddle.net/KBnKc/

grâce

Answer 1

Vous pouvez utiliser le pageX et pageY appropriée té de l'objet jQuery event:

$('#a2').click(function(e) { 
    alert(e.pageX + ", " + e.pageY); 
}); 

Les coordonnées sont retournées par rapport à la partie supérieure gauche du document.

Vous pouvez utiliser le plugin A-Tools, plus précisément sa méthode getSelection(). Il renvoie la position du curseur si aucun texte n'est sélectionné.

Par ailleurs, le "curseur de texte" est appelé le caret :)

EDIT: Le plugin mentionné ci-dessus ne fonctionne pas avec contenteditable<div> éléments. En cherchant une autre solution, j'ai trouvé that question qui est une copie de la vôtre. Peut-être que les réponses peuvent vous aider.

Answer 2

vous pouvez utiliser Prototype.js pour obtenir la position de la souris:

var x, y; 
function getCoordinatesInsideElement(e) 
{ 
    x = Event.pointerX(e); 
    y = Event.pointerY(e); 
    /* DO-SOMETHING */ 
} 

Voir référence prototype à: http://api.prototypejs.org/