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

【问题标题】：How to get text cursor position using javascript如何使用javascript获取文本光标位置
【发布时间】：2023-03-16 08:01:01
【问题描述】：

这是我的代码，我在 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/

谢谢

【问题讨论】：

什么光标，文本还是鼠标？
@Pekka Mouse - 演示只是一个红框。
@Šime 是真的，但它包含一个带有contenteditable=true 的div。
对不起，我想获取文本光标，
获得插入符号位置后，您想做什么？

标签： javascript cursor position

【解决方案1】：

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

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

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

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

顺便说一句，“文本光标”被称为插入符号:)

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

【讨论】：

对不起，我想得到文本光标。
édéric 你确定 getSelection() 适用于 contenteditable DIV 元素吗？

【解决方案2】：

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

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

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

【讨论】：