如何在尚未包含文本的span元素中定位插入符号

Question

在这篇SO文章之后，我可以将插入符号放在span元素中，也就是div contenteditable="true"元素中。

我可以通过id瞄准我想要的任何span，同时也可以决定插入符号应该放在哪个字符之后。

但是，如何将插入符号放置在没有文本的范围内？

简单地按原样使用该函数，就会出现以下错误：TypeError: Range.setStart: Argument 1 is not an object.

此外，由于某些原因，当span有内容时，它在Firefox中运行良好。但在Chrome中则不然，因为插入符号位于span之外。有没有办法也解决这个问题？

我对jQuery持开放态度，如果它能让事情变得更容易的话。

这是我的代码：

JSFiddle

function setCaret(x, y) {
var element = document.getElementById(x);
var range = document.createRange();  
var node;   
node = document.getElementById(y);  
range.setStart(node.childNodes[0], 0);
var sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
element.focus();    
}

body {
font-family: sans-serif;
}
input {
margin-bottom: 5px;
padding: 3px;
}
input:last-of-type {
margin-top: 30px;
}
div {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
span {
font-weight: bold;
}

<input type="button" value="place caret" onclick="setCaret('editableDiv1', 'span1');">
<div id="editableDiv1" contenteditable="true" spellcheck="false">This one <span id="span1">is</span> working.</div>
<input type="button" value="place caret" onclick="setCaret('editableDiv2', 'span2');">
<div id="editableDiv2" contenteditable="true" spellcheck="false">This one <span id="span2"></span> is not.</div>

Answer 1

有一个很好的技巧，你可以考虑使用零宽度空间(看看下面的代码(和CSS属性white-space: pre，它允许空间为"0"；可见"；聚焦时。

function makeTextNode() {
return document.createTextNode('​') // <-- there a zero-width space between quotes
}
function placeCaretInSpan() {
const range = document.createRange()
const editable = document.getElementById("editable")
const span = editable.querySelector("span")
if (span.childNodes.length === 0) {
span.appendChild(makeTextNode()) // <-- you have to have something in span in order to place caret inside
}
range.setStart(span.childNodes[0], 1) // <-- offset by 1 to be inside SPAN element and not before it
let selection = window.getSelection()
range.collapse(true)
selection.removeAllRanges()
selection.addRange(range)
editable.focus()
}

span {
font-weight: bold;
background: yellow;
}
#editable:focus {
white-space: pre;
}

<div contenteditable="true" id="editable">This should be <span></span> editable.</div>
<button onclick="placeCaretInSpan()">place caret</button>

Answer 2

尝试OR运算符，如果node.childNodes[0]未定义，则返回节点：

range.setStart(node.childNodes[0] || node, 0);

Answer 3

第二种情况下会出现问题，因为span2没有内容，而node.childNodes[0]变成了undefined。下面的代码段中使用了一个小的变通方法。代码中唯一更改的行是：

range.setStart(node.childNodes[0], 0);

并成为

range.setStart((typeof node.childNodes[0] !== 'undefined' ? node.childNodes[0] : node), 0);

您可以查看下面的结果。

function setCaret(x, y) {
let element = document.getElementById(x);   
let range = document.createRange();  
let node = document.getElementById(y);  
range.setStart((typeof node.childNodes[0] !== 'undefined' ? node.childNodes[0] : node), 0);
let sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
element.focus();    
}

body {
padding: 10px;
font-family: sans-serif;
}
input {
margin-bottom: 10px;
padding: 5px;
}
input:last-of-type {
margin-top: 50px;
}
div {
width: 300px;
padding: 5px;
border: solid 1px #000;
}
span {
font-weight: bold;
}

<input type="button" value="place caret" onclick="setCaret('editableDiv1', 'span1');">
<div id="editableDiv1" contenteditable="true" spellcheck="false">This one <span id="span1">is</span> working.</div>
<input type="button" value="place caret" onclick="setCaret('editableDiv2', 'span2');">
<div id="editableDiv2" contenteditable="true" spellcheck="false">This one <span id="span2"></span> is working also.</div>