Question

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

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

尝试其他技巧，例如在元素节点内添加空文本节点，或者在节点内设置范围start，在其他地方设置范围结束，然后折叠范围也不起作用。 Anoyone有想法吗？

Answer 1

这在Firefox和Opera中是可行的，但在WebKit和IE中都不可能＆lt; = 8。

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

IE＆lt; = 8有关于选择的各种问题，其中只有一个。 IE 9引入了DOM2 Range支持和HTML5选择支持，您的代码可能在IE 9中运行（我现在无法测试）。

Answer 2

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

.css

.html

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

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

.js

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

Answer 3

我发现，如果您针对Chrome浏览器这样做：

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

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

如何将插入符号放在空DOM元素节点中

3 个答案: