Javascript 在与jQuery UI对话框和文本输入交互时，在contenteditable中保留文本选择

我有一个jQuery对话框，用于在可编辑的范围内创建链接。问题是，单击按钮打开对话框会导致选择丢失，对话框内的文本输入也会导致选择丢失

我可以用-moz-user-select:none修复按钮；但是-webkit用户选择：在Chrome中没有不起作用

我可以通过将输入包装在iframe中来修复它，但这很混乱，单击其他任何地方也会终止选择，例如，拖动对话框

我在上见过这个解决方案，但在contenteditable元素中，它在许多浏览器中都不起作用，只有真正的输入

---

我的问题有好的解决方案吗？

打开和关闭对话框时，您可以使用以下简单功能保存和恢复选择。我对jQuery对话框不太熟悉，不知道连接到对话框打开和关闭的机制。第一个

saveSelection

，返回一个

Range

或

TextRange

对象，您应该将其存储在变量中，然后将其传递给

restoreSelection

：

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

---

我们如何在实践中使用这些功能。关于div项，让我们说testtest谢谢Tim。你是靶场大师！我使用了selectionChange事件。看这里，我使用了Dart，但你应该明白了。@GünterZöchbauer：这肯定是一个比2010年更可行的选择，因为WebKit已经在contenteditable上实现了

selectionchange

事件。Firefox仍然没有做到这一点：@GünterZöchbauer:没有，但是在按钮上使用

mousedown

而不是

click

可以解决这个问题。