如何在更改HTML元素的内容时保留选择

Question

我希望能够在更改HTML元素的内容时保留用户的选择。如果在选择的开头或结尾恰好位于内部时更新元素，则整个选择将丢失。在拖动以创建选择时也会发生这种情况，因此如果用户拖动选择并且当光标位于元素上时更新元素的内部HTML，则用户必须重新开始。

我有一个<span>，其中包含'hh：mm：ss am'格式的时间，并且每秒更新一次。文本的长度永远不会改变，因此这不是问题。

我尝试了以下内容：

var s = window.getSelection();
if (!s.isCollapsed) {
    var range = document.createRange();
    range.setStart(s.anchorNode,s.anchorOffset);
    range.setEnd(s.focusNode,s.focusOffset);
}

document.getElementById('time').innerHTML = new Date().toString();

if (typeof range != 'undefined') { s.removeAllRanges(); s.addRange(range); }

这是我的研究成果最好的，但它似乎没有什么区别。

如果选择在此范围内开始或结束时，我应该怎么做以防止选择消失？

Answer 1

您需要再次设置选择：range.selectNodeContents(newNode);

newNode = document.getElementById("[span id]");