blocks|key|659031|text|在大多数浏览器中，您需要Range和Selection对象。您可以将每个选择边界指定为节点和该节点内的偏移。例如，要将插入符号设置为第二行文本的第五个字符，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|659032|​|659033|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)
}|code-block|syntax|javascript|659034|<div+id="editable"+contenteditable="true">
++text+text+text<br>text+text+text<br>text+text+text<br>
</div>

<button+id="button"+onclick="setCaret()">focus</button>|659035|659036|IE+<9的工作方式完全不同。如果你需要支持这些浏览器，你需要不同的代码。|659037|jsFiddle示例：http://jsfiddle.net/timdown/vXnCM/|659038|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/range|1|https://developer.mozilla.org/en/DOM/selection|2|http://jsfiddle.net/timdown/vXnCM/^0|C|5|I|9|C|5|0|I|9|1|0|0|0|0|0|0|B|Y|2|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]|$9|1D|A|1E|1|1F]]|E|$]]|$1|F|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1K|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|T|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]|13|$5|W|X|Y|E|$Z|14]]]]

<p>In most browsers, you need the <a href="https://developer.mozilla.org/en/DOM/range" rel="noreferrer"><code>Range</code></a> and <a href="https://developer.mozilla.org/en/DOM/selection" rel="noreferrer"><code>Selection</code></a> objects. You specify each of the selection boundaries as a node and an offset within that node. For example, to set the caret to the fifth character of the second line of text, you'd do the following:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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)
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="editable" contenteditable="true"&gt;
  text text text&lt;br&gt;text text text&lt;br&gt;text text text&lt;br&gt;
&lt;/div&gt;

&lt;button id="button" onclick="setCaret()"&gt;focus&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>IE &lt; 9 works completely differently. If you need to support these browsers, you'll need different code.</p>
<p>jsFiddle example: <a href="http://jsfiddle.net/timdown/vXnCM/" rel="noreferrer">http://jsfiddle.net/timdown/vXnCM/</a></p>


blocks|key|876265|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|876266|function+set_mouse()+{
++var+as+=+document.getElementById("editable");
++el+=+as.childNodes[1].childNodes[0];+//goal+is+to+get+('we')+id+to+write+(object+Text)+because+it+work+only+in+object+text
++var+range+=+document.createRange();
++var+sel+=+window.getSelection();
++range.setStart(el,+1);
++range.collapse(true);
++sel.removeAllRanges();
++sel.addRange(range);

++document.getElementById("we").innerHTML+=+el;+//+see+out+put+of+we+id
}|code-block|syntax|javascript|876267|<div+id="editable"+contenteditable="true">dddddddddddddddddddddddddddd
++<p>dd</p>psss
++<p>dd</p>
++<p>dd</p>
++<p>text+text+text</p>
</div>
<p+id='we'></p>
<button+onclick="set_mouse()">focus</button>|876268|876269|当你有像(p)+(span)等高级元素时，很难在适当的位置设置插入符号。目标是获取(对象文本)：|876270|<div+id="editable"+contenteditable="true">dddddddddddddddddddddddddddd<p>dd</p>psss<p>dd</p>
++++<p>dd</p>
++++<p>text+text+text</p>
</div>
<p+id='we'></p>
<button+onclick="set_mouse()">focus</button>
<script>

++++function+set_mouse()+{
++++++++var+as+=+document.getElementById("editable");
++++++++el+=+as.childNodes[1].childNodes[0];//goal+is+to+get+('we')+id+to+write+(object+Text)+because+it+work+only+in+object+text
++++++++var+range+=+document.createRange();
++++++++var+sel+=+window.getSelection();
++++++++range.setStart(el,+1);
++++++++range.collapse(true);
++++++++sel.removeAllRanges();
++++++++sel.addRange(range);

++++++++document.getElementById("we").innerHTML+=+el;//+see+out+put+of+we+id
++++}
</script>|876271|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function set_mouse() {
  var as = document.getElementById("editable");
  el = as.childNodes[1].childNodes[0]; //goal is to get ('we') id to write (object Text) because it work only in object text
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(el, 1);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);

  document.getElementById("we").innerHTML = el; // see out put of we id
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="editable" contenteditable="true"&gt;dddddddddddddddddddddddddddd
  &lt;p&gt;dd&lt;/p&gt;psss
  &lt;p&gt;dd&lt;/p&gt;
  &lt;p&gt;dd&lt;/p&gt;
  &lt;p&gt;text text text&lt;/p&gt;
&lt;/div&gt;
&lt;p id='we'&gt;&lt;/p&gt;
&lt;button onclick="set_mouse()"&gt;focus&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>It is very hard set caret in proper position when you have advance element like (p) (span) etc. The goal is to get (object text):</p>

<pre><code>&lt;div id="editable" contenteditable="true"&gt;dddddddddddddddddddddddddddd&lt;p&gt;dd&lt;/p&gt;psss&lt;p&gt;dd&lt;/p&gt;
    &lt;p&gt;dd&lt;/p&gt;
    &lt;p&gt;text text text&lt;/p&gt;
&lt;/div&gt;
&lt;p id='we'&gt;&lt;/p&gt;
&lt;button onclick="set_mouse()"&gt;focus&lt;/button&gt;
&lt;script&gt;

    function set_mouse() {
        var as = document.getElementById("editable");
        el = as.childNodes[1].childNodes[0];//goal is to get ('we') id to write (object Text) because it work only in object text
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStart(el, 1);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);

        document.getElementById("we").innerHTML = el;// see out put of we id
    }
&lt;/script&gt;
</code></pre>


blocks|key|659160|text|如果你不想使用jQuery，你可以尝试这种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|659161|public+setCaretPosition()+{
++++const+editableDiv+=+document.getElementById('contenteditablediv');
++++const+lastLine+=+this.input.nativeElement.innerHTML.replace(/.*?(<br>)/g,+'');
++++const+selection+=+window.getSelection();
++++selection.collapse(editableDiv.childNodes[editableDiv.childNodes.length+-+1],+lastLine.length);
}|code-block|syntax|javascript|659162|editableDiv你的可编辑元素，别忘了为它设置一个id。然后，您需要从元素中获取innerHTML，并切断所有刹车线。只需使用下一个参数设置折叠即可。|offset|length|style|CODE|659163|entityMap^0|0|0|0|B|S|2|17|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

<p>If you don't want to use jQuery you can try this approach:</p>

<pre><code>public setCaretPosition() {
    const editableDiv = document.getElementById('contenteditablediv');
    const lastLine = this.input.nativeElement.innerHTML.replace(/.*?(&lt;br&gt;)/g, '');
    const selection = window.getSelection();
    selection.collapse(editableDiv.childNodes[editableDiv.childNodes.length - 1], lastLine.length);
}
</code></pre>

<p><code>editableDiv</code> you editable element, don't forget to set an <code>id</code> for it. Then you need to get your <code>innerHTML</code> from the element and cut all brake lines. And just set collapse with next arguments.</p>


blocks|key|659226|text|我正在写一个语法高亮笔(和基本的代码编辑器)，我需要知道如何自动键入单引号字符并将插入符号移回(就像现在的许多代码编辑器一样)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|659227|这是我的解决方案的一小段，感谢这个帖子、MDN文档和许多moz控制台观看的帮助。|659228|//onKeyPress+event

if+(evt.key+===+"\"")+{
++++let+sel+=+window.getSelection();
++++let+offset+=+sel.focusOffset;
++++let+focus+=+sel.focusNode;

++++focus.textContent+%2B=+"\"";+//setting+div's+innerText+directly+creates+new
++++//nodes,+which+invalidate+our+selections,+so+we+modify+the+focusNode+directly

++++let+range+=+document.createRange();
++++range.selectNode(focus);
++++range.setStart(focus,+offset);

++++range.collapse(true);
++++sel.removeAllRanges();
++++sel.addRange(range);
}

//end+onKeyPress+event|code-block|syntax|javascript|659229|这是在一个可编辑的div元素中|659230|我把这个留在这里作为感谢，因为我意识到已经有了一个公认的答案。|659231|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I'm writting a syntax highlighter (and basic code editor), and I needed to know how to auto-type a single quote char and move the caret back (like a lot of code editors nowadays).</p>

<p>Heres a snippet of my solution, thanks to much help from this thread, the MDN docs, and a lot of moz console watching..</p>

<pre><code>//onKeyPress event

if (evt.key === "\"") {
    let sel = window.getSelection();
    let offset = sel.focusOffset;
    let focus = sel.focusNode;

    focus.textContent += "\""; //setting div's innerText directly creates new
    //nodes, which invalidate our selections, so we modify the focusNode directly

    let range = document.createRange();
    range.selectNode(focus);
    range.setStart(focus, offset);

    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

//end onKeyPress event
</code></pre>

<p>This is in a contenteditable div element</p>

<p>I leave this here as a thanks, realizing there is already an accepted answer.</p>


blocks|key|659252|text|++const+el+=+document.getElementById("editable");
++el.focus()
++let+char+=+1,+sel;+//+character+at+which+to+place+caret

++if+(document.selection)+{
++++sel+=+document.selection.createRange();
++++sel.moveStart('character',+char);
++++sel.select();
++}
++else+{
++++sel+=+window.getSelection();
++++sel.collapse(el.lastChild,+char);
++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|659253|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>  const el = document.getElementById("editable");
  el.focus()
  let char = 1, sel; // character at which to place caret

  if (document.selection) {
    sel = document.selection.createRange();
    sel.moveStart('character', char);
    sel.select();
  }
  else {
    sel = window.getSelection();
    sel.collapse(el.lastChild, char);
  }
</code></pre>


blocks|key|876510|text|我认为将插入符号设置为contenteditable元素中的某个位置并不简单。我为此编写了自己的代码。它绕过节点树，计算剩余的字符数，并在需要的元素中设置插入符号。我并没有过多地测试这段代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|876511|//Set+offset+in+current+contenteditable+field+(for+start+by+default+or+for+with+forEnd=true)
function+setCurSelectionOffset(offset,+forEnd+=+false)+{
++++const+sel+=+window.getSelection();
++++if+(sel.rangeCount+!==+1+%7C%7C+!document.activeElement)+return;

++++const+firstRange+=+sel.getRangeAt(0);

++++if+(offset+>+0)+{
++++++++bypassChildNodes(document.activeElement,+offset);
++++}else{
++++++++if+(forEnd)
++++++++++++firstRange.setEnd(document.activeElement,+0);
++++++++else
++++++++++++firstRange.setStart(document.activeElement,+0);
++++}



++++//Bypass+in+depth
++++function+bypassChildNodes(el,+leftOffset)+{
++++++++const+childNodes+=+el.childNodes;

++++++++for+(let+i+=+0;+i+<+childNodes.length+&&+leftOffset;+i%2B%2B)+{
++++++++++++const+childNode+=+childNodes[i];

++++++++++++if+(childNode.nodeType+===+3)+{
++++++++++++++++const+curLen+=+childNode.textContent.length;

++++++++++++++++if+(curLen+>=+leftOffset)+{
++++++++++++++++++++if+(forEnd)
++++++++++++++++++++++++firstRange.setEnd(childNode,+leftOffset);
++++++++++++++++++++else
++++++++++++++++++++++++firstRange.setStart(childNode,+leftOffset);
++++++++++++++++++++return+0;
++++++++++++++++}else{
++++++++++++++++++++leftOffset+-=+curLen;
++++++++++++++++}
++++++++++++}else
++++++++++++if+(childNode.nodeType+===+1)+{
++++++++++++++++leftOffset+=+bypassChildNodes(childNode,+leftOffset);
++++++++++++}
++++++++}

++++++++return+leftOffset;
++++}
}|code-block|syntax|javascript|876512|我还编写了获取当前插入符号位置的代码(没有测试)：|876513|//Get+offset+in+current+contenteditable+field+(start+offset+by+default+or+end+offset+with+calcEnd=true)
function+getCurSelectionOffset(calcEnd+=+false)+{
++++const+sel+=+window.getSelection();
++++if+(sel.rangeCount+!==+1+%7C%7C+!document.activeElement)+return+0;

++++const+firstRange+++++=+sel.getRangeAt(0),
++++++++++startContainer+=+calcEnd+?+firstRange.endContainer+:+firstRange.startContainer,
++++++++++startOffset++++=+calcEnd+?+firstRange.endOffset++++:+firstRange.startOffset;
++++let+needStop+=+false;

++++return+bypassChildNodes(document.activeElement);



++++//Bypass+in+depth
++++function+bypassChildNodes(el)+{
++++++++const+childNodes+=+el.childNodes;
++++++++let+ans+=+0;

++++++++if+(el+===+startContainer)+{
++++++++++++if+(startContainer.nodeType+===+3)+{
++++++++++++++++ans+=+startOffset;
++++++++++++}else
++++++++++++if+(startContainer.nodeType+===+1)+{
++++++++++++++++for+(let+i+=+0;+i+<+startOffset;+i%2B%2B)+{
++++++++++++++++++++const+childNode+=+childNodes[i];

++++++++++++++++++++ans+%2B=+childNode.nodeType+===+3+?+childNode.textContent.length+:
+++++++++++++++++++++++++++childNode.nodeType+===+1+?+childNode.innerText.length+:
+++++++++++++++++++++++++++0;
++++++++++++++++}
++++++++++++}

++++++++++++needStop+=+true;
++++++++}else{
++++++++++++for+(let+i+=+0;+i+<+childNodes.length+&&+!needStop;+i%2B%2B)+{
++++++++++++++++const+childNode+=+childNodes[i];
++++++++++++++++ans+%2B=+bypassChildNodes(childNode);
++++++++++++}
++++++++}

++++++++return+ans;
++++}
}|876514|还需要注意range.startOffset和range.endOffset包含文本节点的字符偏移量(nodeType+===+3)和元素节点的子节点偏移量(nodeType+===+1)。range.startContainer和range.endContainer可以引用树中任何级别的任何元素节点(当然，它们也可以引用文本节点)。|876515|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I think it's not simple to set caret to some position in contenteditable element. I wrote my own code for this. It bypasses the node tree calcing how many characters left and sets caret in needed element. I didn't test this code much.</p>

<pre class="lang-js prettyprint-override"><code>//Set offset in current contenteditable field (for start by default or for with forEnd=true)
function setCurSelectionOffset(offset, forEnd = false) {
    const sel = window.getSelection();
    if (sel.rangeCount !== 1 || !document.activeElement) return;

    const firstRange = sel.getRangeAt(0);

    if (offset &gt; 0) {
        bypassChildNodes(document.activeElement, offset);
    }else{
        if (forEnd)
            firstRange.setEnd(document.activeElement, 0);
        else
            firstRange.setStart(document.activeElement, 0);
    }



    //Bypass in depth
    function bypassChildNodes(el, leftOffset) {
        const childNodes = el.childNodes;

        for (let i = 0; i &lt; childNodes.length &amp;&amp; leftOffset; i++) {
            const childNode = childNodes[i];

            if (childNode.nodeType === 3) {
                const curLen = childNode.textContent.length;

                if (curLen &gt;= leftOffset) {
                    if (forEnd)
                        firstRange.setEnd(childNode, leftOffset);
                    else
                        firstRange.setStart(childNode, leftOffset);
                    return 0;
                }else{
                    leftOffset -= curLen;
                }
            }else
            if (childNode.nodeType === 1) {
                leftOffset = bypassChildNodes(childNode, leftOffset);
            }
        }

        return leftOffset;
    }
}
</code></pre>

<p>I also wrote code to get current caret position (didn't test):</p>

<pre class="lang-js prettyprint-override"><code>//Get offset in current contenteditable field (start offset by default or end offset with calcEnd=true)
function getCurSelectionOffset(calcEnd = false) {
    const sel = window.getSelection();
    if (sel.rangeCount !== 1 || !document.activeElement) return 0;

    const firstRange     = sel.getRangeAt(0),
          startContainer = calcEnd ? firstRange.endContainer : firstRange.startContainer,
          startOffset    = calcEnd ? firstRange.endOffset    : firstRange.startOffset;
    let needStop = false;

    return bypassChildNodes(document.activeElement);



    //Bypass in depth
    function bypassChildNodes(el) {
        const childNodes = el.childNodes;
        let ans = 0;

        if (el === startContainer) {
            if (startContainer.nodeType === 3) {
                ans = startOffset;
            }else
            if (startContainer.nodeType === 1) {
                for (let i = 0; i &lt; startOffset; i++) {
                    const childNode = childNodes[i];

                    ans += childNode.nodeType === 3 ? childNode.textContent.length :
                           childNode.nodeType === 1 ? childNode.innerText.length :
                           0;
                }
            }

            needStop = true;
        }else{
            for (let i = 0; i &lt; childNodes.length &amp;&amp; !needStop; i++) {
                const childNode = childNodes[i];
                ans += bypassChildNodes(childNode);
            }
        }

        return ans;
    }
}
</code></pre>

<p>You also need to be aware of range.startOffset and range.endOffset contain character offset for text nodes (nodeType === 3) and child node offset for element nodes (nodeType === 1). range.startContainer and range.endContainer may refer to any element node of any level in the tree (of course they also can refer to text nodes).</p>


blocks|key|659376|text|基于Tim+Down的答案，但它检查最后一个已知的“良好”文本行。它将光标放在最末尾。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|659377|此外，我还可以递归/迭代地检查每个连续的最后一个子节点的最后一个子节点，以找到DOM中绝对最后一个“好”的文本节点。|659378|​|659379|function+onClickHandler()+{
++setCaret(document.getElementById("editable"));
}

function+setCaret(el)+{
++let+range+=+document.createRange(),
++++++sel+=+window.getSelection(),
++++++lastKnownIndex+=+-1;
++for+(let+i+=+0;+i+<+el.childNodes.length;+i%2B%2B)+{
++++if+(isTextNodeAndContentNoEmpty(el.childNodes[i]))+{
++++++lastKnownIndex+=+i;
++++}
++}
++if+(lastKnownIndex+===+-1)+{
++++throw+new+Error('Could+not+find+valid+text+content');
++}
++let+row+=+el.childNodes[lastKnownIndex],
++++++col+=+row.textContent.length;
++range.setStart(row,+col);
++range.collapse(true);
++sel.removeAllRanges();
++sel.addRange(range);
++el.focus();
}

function+isTextNodeAndContentNoEmpty(node)+{
++return+node.nodeType+==+Node.TEXT_NODE+&&+node.textContent.trim().length+>+0
}|code-block|syntax|javascript|659380|<div+id="editable"+contenteditable="true">
++text+text+text<br>text+text+text<br>text+text+text<br>
</div>
<button+id="button"+onclick="onClickHandler()">focus</button>|659381|659382|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Based on Tim Down's answer, but it checks for the last known "good" text row. It places the cursor at the very end.</p>

<p>Furthermore, I could also recursively/iteratively check the last child of each consecutive last child to find the absolute last "good" text node in the DOM.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function onClickHandler() {
  setCaret(document.getElementById("editable"));
}

function setCaret(el) {
  let range = document.createRange(),
      sel = window.getSelection(),
      lastKnownIndex = -1;
  for (let i = 0; i &lt; el.childNodes.length; i++) {
    if (isTextNodeAndContentNoEmpty(el.childNodes[i])) {
      lastKnownIndex = i;
    }
  }
  if (lastKnownIndex === -1) {
    throw new Error('Could not find valid text content');
  }
  let row = el.childNodes[lastKnownIndex],
      col = row.textContent.length;
  range.setStart(row, col);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  el.focus();
}

function isTextNodeAndContentNoEmpty(node) {
  return node.nodeType == Node.TEXT_NODE &amp;&amp; node.textContent.trim().length &gt; 0
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="editable" contenteditable="true"&gt;
  text text text&lt;br&gt;text text text&lt;br&gt;text text text&lt;br&gt;
&lt;/div&gt;
&lt;button id="button" onclick="onClickHandler()"&gt;focus&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|876628|text|我重构了@Liam的答案。我把它放在一个带有静态方法的类中，我让它的函数接收一个元素而不是#id，并做了一些其他的小调整。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|876629|此代码特别适用于修复您可能使用<div+contenteditable="true">创建的富文本框中的光标。在达到下面的代码之前，我被困在这里好几天了。|offset|length|style|CODE|876630|编辑:他的答案和这个答案都有一个错误，涉及到按enter键。由于enter不算字符，因此在按enter后光标位置会变得混乱。如果我能够修复代码，我会更新我的答案。|876631|edit2:省去了很多麻烦，并确保你的<div+contenteditable=true>是display:+inline-block。这修复了一些与Chrome在按enter键时使用<div>而不是<br>相关的错误。|876632|如何使用|876633|let+richText+=+document.getElementById('rich-text');
let+offset+=+Cursor.getCurrentCursorPosition(richText);
//+insert+code+here+that+does+stuff+to+the+innerHTML,+such+as+adding/removing+<span>+tags
Cursor.setCurrentCursorPosition(offset,+richText);
richText.focus();|code-block|syntax|javascript|876634|代码|876635|//+Credit+to+Liam+(Stack+Overflow)
//+https://stackoverflow.com/a/41034697/3480193
class+Cursor+{
++++static+getCurrentCursorPosition(parentElement)+{
++++++++var+selection+=+window.getSelection(),
++++++++++++charCount+=+-1,
++++++++++++node;
++++++++
++++++++if+(selection.focusNode)+{
++++++++++++if+(Cursor._isChildOf(selection.focusNode,+parentElement))+{
++++++++++++++++node+=+selection.focusNode;+
++++++++++++++++charCount+=+selection.focusOffset;
++++++++++++++++
++++++++++++++++while+(node)+{
++++++++++++++++++++if+(node+===+parentElement)+{
++++++++++++++++++++++++break;
++++++++++++++++++++}

++++++++++++++++++++if+(node.previousSibling)+{
++++++++++++++++++++++++node+=+node.previousSibling;
++++++++++++++++++++++++charCount+%2B=+node.textContent.length;
++++++++++++++++++++}+else+{
++++++++++++++++++++++++node+=+node.parentNode;
++++++++++++++++++++++++if+(node+===+null)+{
++++++++++++++++++++++++++++break;
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}
++++++++}
++++++++
++++++++return+charCount;
++++}
++++
++++static+setCurrentCursorPosition(chars,+element)+{
++++++++if+(chars+>=+0)+{
++++++++++++var+selection+=+window.getSelection();
++++++++++++
++++++++++++let+range+=+Cursor._createRange(element,+{+count:+chars+});

++++++++++++if+(range)+{
++++++++++++++++range.collapse(false);
++++++++++++++++selection.removeAllRanges();
++++++++++++++++selection.addRange(range);
++++++++++++}
++++++++}
++++}
++++
++++static+_createRange(node,+chars,+range)+{
++++++++if+(!range)+{
++++++++++++range+=+document.createRange()
++++++++++++range.selectNode(node);
++++++++++++range.setStart(node,+0);
++++++++}

++++++++if+(chars.count+===+0)+{
++++++++++++range.setEnd(node,+chars.count);
++++++++}+else+if+(node+&&+chars.count+>0)+{
++++++++++++if+(node.nodeType+===+Node.TEXT_NODE)+{
++++++++++++++++if+(node.textContent.length+<+chars.count)+{
++++++++++++++++++++chars.count+-=+node.textContent.length;
++++++++++++++++}+else+{
++++++++++++++++++++range.setEnd(node,+chars.count);
++++++++++++++++++++chars.count+=+0;
++++++++++++++++}
++++++++++++}+else+{
++++++++++++++++for+(var+lp+=+0;+lp+<+node.childNodes.length;+lp%2B%2B)+{
++++++++++++++++++++range+=+Cursor._createRange(node.childNodes[lp],+chars,+range);

++++++++++++++++++++if+(chars.count+===+0)+{
++++++++++++++++++++break;
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}
++++++++}+

++++++++return+range;
++++}
++++
++++static+_isChildOf(node,+parentElement)+{
++++++++while+(node+!==+null)+{
++++++++++++if+(node+===+parentElement)+{
++++++++++++++++return+true;
++++++++++++}
++++++++++++node+=+node.parentNode;
++++++++}

++++++++return+false;
++++}
}|876636|entityMap^0|0|F|S|0|0|J|Q|1A|L|2K|5|2S|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@$D|10|E|11|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@$D|14|E|15|F|G]|$D|16|E|17|F|G]|$D|18|E|19|F|G]|$D|1A|E|1B|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1D|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1F|8|@]|9|@]|A|$Q|R]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$]]

<p>I refactored @Liam's answer. I put it in a class with static methods, I made its functions receive an element instead of an #id, and some other small tweaks.</p>
<p>This code is particularly good for fixing the cursor in a rich text box that you might be making with <code>&lt;div contenteditable=&quot;true&quot;&gt;</code>. I was stuck on this for several days before arriving at the below code.</p>
<p>edit: His answer and this answer have a bug involving hitting enter. Since enter doesn't count as a character, the cursor position gets messed up after hitting enter. If I am able to fix the code, I will update my answer.</p>
<p>edit2: Save yourself a lot of headaches and make sure your <code>&lt;div contenteditable=true&gt;</code> is <code>display: inline-block</code>. This fixes some bugs related to Chrome putting <code>&lt;div&gt;</code> instead of <code>&lt;br&gt;</code> when you press enter.</p>
<h1>How To Use</h1>
<pre><code>let richText = document.getElementById('rich-text');
let offset = Cursor.getCurrentCursorPosition(richText);
// insert code here that does stuff to the innerHTML, such as adding/removing &lt;span&gt; tags
Cursor.setCurrentCursorPosition(offset, richText);
richText.focus();
</code></pre>
<h1>Code</h1>
<pre><code>// Credit to Liam (Stack Overflow)
// https://stackoverflow.com/a/41034697/3480193
class Cursor {
    static getCurrentCursorPosition(parentElement) {
        var selection = window.getSelection(),
            charCount = -1,
            node;
        
        if (selection.focusNode) {
            if (Cursor._isChildOf(selection.focusNode, parentElement)) {
                node = selection.focusNode; 
                charCount = selection.focusOffset;
                
                while (node) {
                    if (node === parentElement) {
                        break;
                    }

                    if (node.previousSibling) {
                        node = node.previousSibling;
                        charCount += node.textContent.length;
                    } else {
                        node = node.parentNode;
                        if (node === null) {
                            break;
                        }
                    }
                }
            }
        }
        
        return charCount;
    }
    
    static setCurrentCursorPosition(chars, element) {
        if (chars &gt;= 0) {
            var selection = window.getSelection();
            
            let range = Cursor._createRange(element, { count: chars });

            if (range) {
                range.collapse(false);
                selection.removeAllRanges();
                selection.addRange(range);
            }
        }
    }
    
    static _createRange(node, chars, range) {
        if (!range) {
            range = document.createRange()
            range.selectNode(node);
            range.setStart(node, 0);
        }

        if (chars.count === 0) {
            range.setEnd(node, chars.count);
        } else if (node &amp;&amp; chars.count &gt;0) {
            if (node.nodeType === Node.TEXT_NODE) {
                if (node.textContent.length &lt; chars.count) {
                    chars.count -= node.textContent.length;
                } else {
                    range.setEnd(node, chars.count);
                    chars.count = 0;
                }
            } else {
                for (var lp = 0; lp &lt; node.childNodes.length; lp++) {
                    range = Cursor._createRange(node.childNodes[lp], chars, range);

                    if (chars.count === 0) {
                    break;
                    }
                }
            }
        } 

        return range;
    }
    
    static _isChildOf(node, parentElement) {
        while (node !== null) {
            if (node === parentElement) {
                return true;
            }
            node = node.parentNode;
        }

        return false;
    }
}
</code></pre>


blocks|key|876653|text|var+sel+=+window.getSelection();
sel?.setPosition(wordDiv.childNodes[0],+5);
event.preventDefault();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|876654|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var sel = window.getSelection();
sel?.setPosition(wordDiv.childNodes[0], 5);
event.preventDefault();
</code></pre>


blocks|key|659484|text|move(element:any,x:number){//parent
++++let+arr:Array<any>=[];
++++arr=this.getAllnodeOfanItem(this.input.nativeElement,arr);
++++let+j=0;
++++while+(x>arr[j].length+&&+j<arr.length){
++++++++x-=arr[j].length;
++++++++j%2B%2B;
++++}
++++

++++
++++var+el+=+arr[j];
++++var+range+=+document.createRange();
++++var+sel+=+window.getSelection();
++++range.setStart(el,x+);
++++range.collapse(true);
++++if+(sel)sel.removeAllRanges();
++++if+(sel)sel.addRange(range);
}+++

getAllnodeOfanItem(element:any,rep:Array<any>){
++++let+ch:Array<any>=element.childNodes;
++++if+(ch.length==0+&&+element.innerText!="")
++++++++rep.push(element);
++++else{
++++++++for+(let+i=0;i<ch.length;i%2B%2B){
++++++++++++rep=this.getAllnodeOfanItem(ch[i],rep)
++++++++}
++++}
++++return+rep;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|659485|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>move(element:any,x:number){//parent
    let arr:Array&lt;any&gt;=[];
    arr=this.getAllnodeOfanItem(this.input.nativeElement,arr);
    let j=0;
    while (x&gt;arr[j].length &amp;&amp; j&lt;arr.length){
        x-=arr[j].length;
        j++;
    }
    

    
    var el = arr[j];
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el,x );
    range.collapse(true);
    if (sel)sel.removeAllRanges();
    if (sel)sel.addRange(range);
}   

getAllnodeOfanItem(element:any,rep:Array&lt;any&gt;){
    let ch:Array&lt;any&gt;=element.childNodes;
    if (ch.length==0 &amp;&amp; element.innerText!=&quot;&quot;)
        rep.push(element);
    else{
        for (let i=0;i&lt;ch.length;i++){
            rep=this.getAllnodeOfanItem(ch[i],rep)
        }
    }
    return rep;
}
</code></pre>


blocks|key|876698|text|我已经从这里阅读并尝试了一些案例，考虑到dom节点的一些细节，我只是把对我有用的东西放在这里：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|876699|++focus(textInput){
++++const+length+=+textInput.innerText.length;
++++textInput.focus();

++++if(!!textInput.lastChild){
++++++const+sel+=+window.getSelection();
++++++sel.collapse(textInput.lastChild,+length);
++++}
++}|code-block|syntax|javascript|876700|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I've readed and tried some cases from here and just put here what is working for me, considering some details according dom nodes:</p>
<pre><code>  focus(textInput){
    const length = textInput.innerText.length;
    textInput.focus();

    if(!!textInput.lastChild){
      const sel = window.getSelection();
      sel.collapse(textInput.lastChild, length);
    }
  }
</code></pre>


<p>I have this simple HTML as an example:</p>

<pre><code>&lt;div id="editable" contenteditable="true"&gt;
  text text text&lt;br&gt;
  text text text&lt;br&gt;
  text text text&lt;br&gt;
&lt;/div&gt;
&lt;button id="button"&gt;focus&lt;/button&gt;
</code></pre>

<p>I want simple thing - when I click the button, I want to place caret(cursor) into specific place in the editable div. From searching over the web, I have this JS attached to button click, but it doesn't work (FF, Chrome):</p>

<pre><code>var range = document.createRange();
var myDiv = document.getElementById("editable");
range.setStart(myDiv, 5);
range.setEnd(myDiv, 5);
</code></pre>

<p>Is it possible to set manually caret position like this ?</p>


How to set the caret (cursor) position in a contenteditable element (div)?

jQuery

我有一个简单的HTML示例：<div id="editable" contenteditable="true">  text text text<br>  text text text<br>  text text text<br></div><button id="button">focus</button>我想要简...

问如何在可编辑元素(div)中设置插入符号(光标)的位置？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在可编辑元素(div)中设置插入符号(光标)的位置？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在可编辑元素(div)中设置插入符号(光标)的位置？
EN