使所选文本保持输入焦点

Question

我正在尝试在选定文本上添加一个链接（在contenteditable ）。 链接窗口只是一个输入字段。 问题是，在我选择了一些文本之后，单击链接按钮以显示链接输入字段并聚焦，我丢失了所选文本。

WYSIHTML5如何做到： http ://xing.github.com/wysihtml5/？ 如果单击工具栏中的链接图标，然后将焦点放在链接的输入字段上，则所选文本保持选中状态。

另外，我可以将选择内容保存在变量中，但是如何在blur()上调用它呢？ 我必须将变量设为全局变量吗？ 在blur()上时，我得到“selected not defined” 。

HTML：

<button class="link_button">L</button>
<div class="link window hidden"><input name='link' class='link_input' autofocus='autofocus' value='http://'/></div>

jQuery的：

$('.link_button').click(function() {
    $('.link').toggleClass('hidden');
});

$('.link_input').focus(function() {
    var selected = saveSelection();
})

$('.link_input').blur(function() {
    restoreSelection(selected);
})

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();
        }
    }
}

有任何想法吗？ 谢谢！

Answer 1

您可以使用rangy库进行轻松的选择管理。

1. 这是跨浏览器支持的库。
2. 使用简单