将所选文本保留在输入焦点上

Keep selected text on input focus

本文关键字:输入 焦点 保留 文本      更新时间:2023-09-26

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

j查询:

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

有什么想法吗?谢谢!

您可以使用 rangy 库来轻松管理选择。

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