zjm1126 zjm1126 - 5 months ago 15
Javascript Question

How to get text cursor position using javascript

this is my code ,i fill space all in div ,(use 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>


so how can i get the text cursor position when i click somewhere in 'a2' div

the demo is http://jsfiddle.net/KBnKc/

thanks

Answer

You can use the pageX and pageY property of the jQuery event object:

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

The returned coordinates are relative to the top left of the document.

You might want to use the A-Tools plugin, more specifically its getSelection() method. It returns the caret position if no text is selected.

By the way, the "text cursor" is called the caret :)

EDIT: The aforementioned plugin will not work with contenteditable <div>elements. While looking for another solution, I found that question which is a duplicate of yours. Maybe the responses there can help you.