如何在空的 DOM 元素节点中放置插入符号答案

【问题标题】：How to place caret inside an empty DOM Element Node如何在空的 DOM 元素节点中放置插入符号
【发布时间】：2011-03-30 15:57:00
【问题描述】：

如何将插入符号（折叠范围）放置在空元素节点内。这段代码应该可以工作，但它没有。

node = document.getElementById('some-empty-strong-node')
range = document.createRange()
range.selectNodeContents(node)
window.getSelection().addRange(range)

尝试其他技巧，例如在元素节点内添加一个空文本节点或在节点内设置范围开始并在其他位置结束范围，然后折叠范围也不起作用。有人有想法吗？

【问题讨论】：

标签： javascript html dom

【解决方案1】：

这在 Firefox 和 Opera 中是可能的，但在 WebKit 和 IE 中是不可能的

WebKit 有一个长期存在的错误来解决这个问题：https://bugs.webkit.org/show_bug.cgi?id=15256 用于空元素情况，https://bugs.webkit.org/show_bug.cgi?id=23189 用于将插入符号放在文本节点开头的一般情况。上次我听说它可能需要数年才能修复。

【讨论】：

已经添加了我的 +1，但看到您的编辑并决定快速测试 IE 9 - 它可以工作。
@Andy：太好了，我想它可能会。 WebKit 在这方面拖后腿现在变得很烦人：已经三年半了。
这就解释了。我在chrome中尝试过。谢谢。
又过了 3 年，这个错误似乎仍然存在！
contenteditable 的情况仍有待在 chrome 中修复，已提交错误 here。

【解决方案2】：

一个技巧是使用占位符（因此在放置插入符号时它会消失）。在 chrome 上使用“display: inline” div 为我工作。

.css

[invisibleplaceholder]:empty:before{
    content: attr(invisibleplaceholder);
    color: transparent;
    cursor: text;
}

[invisibleplaceholder]:empty:focus:before{
    content: "";
}

.html

<div id="div1" contenteditable="true" invisbleplaceholder="."></div>
<div id="div2" contenteditable="true" invisibleplaceholder="."></div>

.js

$("body").click(function(){
        var range = document.createRange();
        var sel = window.getSelection();
        var node = $('div2')[0]; //your node
        range.setStart(node, 0); //your position in node
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    });

【讨论】：

【解决方案3】：

我发现如果你为 Chrome 这样做：

<div id="select-this-element"> <br style="content: no-close-quote;" /></div>

它的工作方式与在 Firefox 和 Opera 中的工作方式相同。

【讨论】：

它不是空的，你在
里面有
标签，问题是如何添加插入符号，例如：