将所选文本保持在输入焦点上答案

【问题标题】：Keep selected text on input focus将所选文本保持在输入焦点上
【发布时间】：2013-01-14 22:24:45
【问题描述】：

我正在尝试在所选文本上添加链接（在 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();
        }
    }
}

有什么想法吗？谢谢！

【问题讨论】：

如果选择没有消失，那么 WYSIHTML5 必须要么使用 iframe 作为可编辑区域（WYSIWYG 编辑器的常用技术；它曾经是过去在 Firefox 中的唯一方法）或伪造选择。我怀疑是前者。
@Alex 这可能是一个老问题，但我想知道到目前为止您是否找到任何解决方案？我有同样的问题！谢谢

标签： javascript select text input focus

【解决方案1】：

您可以使用rangy library 进行简单的选择管理。

这是一个跨浏览器支持的库。
使用简单

【讨论】：

不，我想在没有库的情况下这样做。
然后查看这个库中的代码。您将了解如何获取选择并正确保存。