代码之家  ›  专栏  ›  技术社区  ›  Jake

在ContentEditable中保留文本选择,同时与jQuery UI对话框和文本输入交互

  •  13
  • Jake  · 技术社区  · 14 年前

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

    我可以用-moz-user-select:none修复按钮;但是-webkit-user-select:none在chrome中不起作用。

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

    我已经看到解决方案 How to preserve text selection when opening a jQuery dialog 但在ContentEditable元素中,这在许多浏览器中都不起作用,只有实际的输入。

    我的问题有好的解决办法吗?

    1 回复  |  直到 14 年前
        1
  •  28
  •   Tim Down    14 年前

    打开和关闭对话框时,可以使用以下简单函数保存和恢复选择。我对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();
            }
        }
    }