将焦点置于 div FF 中的选定文本

Placing focus on selected text in div FF

我想自动 select 一段文本,以便用户可以使用 ctrl + c 将其复制到剪贴板。
为了做到这一点,我将一些事件处理程序附加到几个输入和几个 divs(tabindex="0")。
但是,如果我 select 一段带有 javascript 的文本,浏览器会指示 selection 但将焦点保持在输入上。
如果我尝试实现相同的目标,但以 div 为触发器,它会起作用。
此行为仅存在于 FireFox 中。

在我的 jsfiddle(或下面的代码片段)中,将焦点放在第一个输入上,按一个随机键(selects 文本),然后尝试将其复制粘贴到较低的输入。
然后尝试做同样的事情,但点击 div。 (单击 div 也会 select 文本)。

var input = document.getElementById("my-input");
input.addEventListener("keydown", function(evt){
    selectText(document.getElementById("selectme"));
});

var div = document.getElementById("clickme");
div.addEventListener("click", function(evt){
    selectText(document.getElementById("selectme"));
});

var selectText = function(element){
    var range, selection;
    if(document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if(window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
    element.focus();
}
<input id="my-input"/>
<div id="selectme">Texttexttexttext</div>
<div tabindex="0" id="clickme">CLICK ME</div>
<input />

如果您先调用 evt.target.blur();,输入将在聚焦 div 之前失去焦点。

您的函数将如下所示:

var input = document.getElementById("my-input");
input.addEventListener("keydown", function(evt){
    evt.target.blur();
    selectText(document.getElementById("selectme"));
});