如何使用JavaScript获取文本光标位置

Question

这是我的代码，我用jQuery填充了div中的所有空白：

<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>

当我在'a2' div中的某个位置单击时，如何获取文本光标位置？

演示链接：http://jsfiddle.net/KBnKc/

谢谢。

- zjm1126

---

光标是指文本光标还是鼠标光标？ - Pekka

@Pekka Mouse - 这个演示只是一个红色的方框。 - Šime Vidas

@Šime 是的，但它包含一个 contenteditable=true 的 div。 - Pekka

抱歉，我想获取文本光标。 - zjm1126

你得到插入符号位置后想做什么？ - Tim Down

我想做一个编辑器，你可以像纸一样使用它。 - zjm1126

Answer 1

你可以使用jQuery event对象的pageX和pageY属性：

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

返回的坐标是相对于文档左上角的位置。

你可能想使用A-Tools插件，更具体地说是它的getSelection()方法。如果没有选中文本，它将返回插入符位置。

顺便提一下，“文本光标”也被称为插入符 :) 编辑： 上述插件将无法与contenteditable <div>元素一起使用。在寻找其他解决方案时，我发现了那个问题，它是您的重复问题。也许那里的回答可以帮助您。

- Frédéric Hamidi

---

抱歉，我想获取文本光标。 - zjm1126

你确定 getSelection() 函数可以在 contenteditable 的 DIV 元素上正常工作吗？ - Šime Vidas

Answer 2

你可以使用 Prototype.js 来获取鼠标位置：

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

请参考原型引用：http://api.prototypejs.org/

- ArBR