如何在可编辑的 div 中设置光标位置

Question

如何在可编辑的 div 中设置光标位置

4

我有一个div

<div id="user_status" class="status expanddiv" onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?...">
 Some Text will goes Here.
</div>

当调用username_Search函数时，它会通过光标位于0位置。但我需要让光标停留在其实际位置。我可以在调用此函数之前获取光标位置，但无法设置光标位置。

有没有人有解决方案？

- user3337174

你在username_Search函数中更改div的内容吗？ - Karthik AMR

是的，我正在进行更改。我正在将文本转换为URL链接。例如：google.com.. 它变成了<a href="www.google.com">google.com</a>转换为链接后，光标位于0位置。 - user3337174

需要设置光标位置还是返回当前光标位置？谢谢。 - guest271314

你使用的是哪个浏览器？ - Karthik AMR

我希望它适用于所有浏览器...但目前只在使用Chrome。 - user3337174

@user3337174，请确认答案适用于Chrome和Firefox浏览器。 - Karthik AMR

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karthik AMR · Accepted Answer

如果你正在使用Chrome或Firefox，那么下面的代码将很好地完成任务。这段代码没有在IE或Safari中进行测试。

setCaretPosition函数是你想要的，我认为。

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;
                    }
                }
            } 
            return caretPos;
        }

function setCaretPosition(ctrl, pos) {
            if (window.getSelection) {
                pos = (ctrl.textContent.length > pos ? pos : ctrl.textContent.length);
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(ctrl.childNodes[0]);
                range.endOffset = pos;
                selection.removeAllRanges();
                selection.addRange(range);
                selection.collapse(ctrl.childNodes[0], pos);
            }
}

function username_Search(st,str)
{
   var ctl = document.getElementById('user_status');
var pos = getCaretPosition(ctl);
    document.getElementById("user_status").textContent 
= "dsdssadsadasdffstjdyjdrtyurtystseryds";
    setCaretPosition(ctl,pos);
}

<div id="user_status" class="status expanddiv" onkeyup="username_Search('New','user_status');" contenteditable="true" data-text="What's on your mind?...">
 Some Text will goes Here.
</div>