使所選文本保持輸入焦點

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. 使用簡單