将焦点放在div FF中的选定文本上

时间:2015-07-20 09:46:50

标签: javascript firefox focus selection

我想自动选择一段文字,以便用户可以使用ctrl + c将其复制到剪贴板。
为了做到这一点,我已经将一些事件处理程序附加到几个输入和几个div(tabindex="0")。
但是,如果我使用javascript选择一段文本,浏览器会指示选择,但会将注意力集中在输入上 如果我试图达到相同的目的,但div是触发器,它的工作原理 此行为仅适用于FireFox。

在我的jsfiddle(或下面的代码段)中,将焦点放在第一个输入上,按一个随机键(选择文本),然后尝试将其粘贴到下面的输入中。
然后尝试执行相同操作,但单击div。 (单击div也将选择文本。)



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 />
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

您的功能如下:

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