如何使用JavaScript在前节点/块中选择文本？

Question

我理解不允许JS将任意文本复制到剪贴板的安全原因,但是有一种方法可以通过单击按钮来选择预先节点中的文本,类似于select()函数在输入中的工作方式吗？

我不是在寻找复制到剪贴板的jQuery插件.我只想在pre block中发短信以便突出显示,以便用户可以ctrl-c进行复制.

我似乎发现了蹲下.

Answer 1

这不是太难。您需要为 IE < 9 和所有其他浏览器设置单独的分支。这是一个选择元素内容的函数：

现场演示：http : //jsfiddle.net/yQa2w/

代码：

function selectElementContents(el) {
    if (window.getSelection && document.createRange) {
        // IE 9 and non-IE
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        // IE < 9
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

Answer 2

这就是你需要的:

var clip = function(el) {
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(range);
};

和HTML:

<pre onclick="clip(this);" id="copy_paste"></pre>

或者,如果您想以编程方式执行此操作:

clip(document.getElementById("copy_paste"));

或者在jquery中:

clip($("#copy_paste")[0]);

您不能将jquery元素clip()作为参数el传递.它将给出"TypeError:Range.selectNodeContents的参数1不实现接口节点".

Answer 3

也许你可以将pre标签更改为textarea用户点击时的标签：

jsFiddle： http: //jsfiddle.net/WzBQf/

<button id="btnSelect">Select!</button>
<button id="btnDeselect">Deselect!</button>
<hr />
<div id="text">
    <pre id="txt1">Test</pre>
    <textarea id="txt2" readonly="readonly"></textare>
</div>

JavaScript (jQuery) 代码：

$("#txt1, #btnSelect").click(function() {
    Select();
});


function Select() {
    $("#txt2").val($("#txt1").html()).show();
    $("#txt1").hide();

    $("#txt2").focus()[0].select();
}

function Deselect() {
    $("#txt1").html($("#txt2").val()).show();
    $("#txt2").hide();
}
$("#txt2").blur(function() {
    Deselect();
});

$("#btnDeselect").click(function() {
    Deselect();
});