内容可编辑DIV单击/插入符号设置

Content Editable DIV Clicking/caret Setting

本文关键字：插入 符号 设置 单击 DIV 编辑      更新时间：2023-09-26

我有一个标准的内容可编辑div:

<div id="profileBody" class="customInputDiv" contentEditable='true' autocomplete="off"></div>

基本上，我想检测光标在某个事件上的位置（最好是onclick、keydown或按钮上的代码）。

类似的内容：
onkeydown-保存div中的插入符号位置，然后设置插入符号位置。

这听起来有点傻，但这是必需的，因为在某些事件中，我会稍微更改内容，并且在进行操作时，光标位置会发生变化，这非常令人讨厌。

我讨厌在没有我尝试过的例子的情况下提问，但如果你读过以前的问题，我总是非常详细地提供我尝试过什么，在这里就死定了！

function setCaret() {
    var el = document.getElementById("editable");
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[2], 5);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    el.focus();
}
​

也许是解析window.getSelection();数据的好方法？

找到：http://jsfiddle.net/s5xAr/3/但我不想要——只希望它使用一个函数来获得插入符号的位置，并设置它，例如

getCaretPOS();
//do something
setCaretPOS();

这个代码会设置它，但获取它似乎是个问题。。

要获取插入符号位置，请使用以下函数：

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}

这应该适用于大多数浏览器（当然，离开IE）。你的setCaret功能似乎覆盖了IE。

该函数来自另一个SO答案。还可以看看评论。

演示

相关文章：