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

【问题标题】：How to preserve selection when changing contents of an HTML element更改 HTML 元素的内容时如何保留选择
【发布时间】：2011-07-24 06:26:35
【问题描述】：

我希望在更改 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); }

这是我的研究得出的最好结果，但似乎并没有什么不同。

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

【问题讨论】：

标签： javascript dom selection

【解决方案1】：

需要重新设置选择：range.selectNodeContents(newNode);

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

【讨论】：

我不想选择整个模式。我想保留用户目前在页面上所做的任何选择，无论它是在时间跨度内还是部分在时间跨度内。