Question

这是我的代码，我在div中填充空格，（使用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>

那么当我点击“a2”div

中的某个地方时，如何获得文本光标位置

演示版为http://jsfiddle.net/KBnKc/

感谢

Answer 1

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

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

~~返回的坐标相对于文档的左上角。~~

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

顺便说一句，“文本光标”称为插入符号：）

编辑：上述插件不适用于contenteditable <div>个元素。在寻找另一种解决方案时，我发现that question与您的副本相同。也许那里的回答可以帮到你。

Answer 2

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

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

请参阅：http://api.prototypejs.org/

上的原型参考

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

2 个答案: