javascript - 无法让 document.execCommand ("copy")按预期工作

Question

我正在尝试从页面上抓取一些数据，但无法完全获取 document.execCommand("copy")按预期工作。

作为测试，我将一些 HTML 注入(inject)到页面中，然后尝试将其复制到剪贴板

$('#topcard h1').append('<a id="getData" type="text">This is some data</a>')

然后我可以看到This is some data页面上出现

然后:

var copyText = document.querySelector("#getData")
copyText

在控制台显示: <a id=​"getData" type=​"text">​This is some data​</a>​

看来copyText这正是我想要的。

但是: copyText.select()返回

VM2319:1 Uncaught TypeError: copyText.select is not a function
    at <anonymous>:1:10

我做错了什么？

Answer 1

.select()可以让您设置 <input> 的选择范围或<textarea> :

document.getElementById("foo").select()

<input id="foo" value="12345">

...但不适用于其他 DOM 节点(包括 contentEditable 节点)。要选择表单字段内容以外的任何内容，您需要使用 Selection API:

var r = document.createRange();
r.selectNode(document.getElementById("foo"));
var s = window.getSelection();
s.addRange(r);

<div id="foo">12345</div>

无论哪种情况，一旦做出选择，您就可以使用 document.execCommand("copy")将选定的文本捕获到剪贴板 - 但有一个非常重要的警告:这必须在用户启动的事件处理程序中完成。 (这是为了防止恶意网站在用户不知情的情况下劫持用户的剪贴板。)

var captureSelection = function() {
  var r = document.createRange();
  r.selectNode(document.getElementById("foo"));
  var s = window.getSelection();
  s.addRange(r);
  document.execCommand("copy");
}

// this will select the DOM node, but will  not copy it to 
// the clipboard (because it's not user-initiated):
captureSelection();

// this _will_ copy it to the clipboard:
document.getElementById("bar").onclick = captureSelection;

<div id="foo">12345</div>

<button id="bar">Go</button>
<br><br>

<textarea placeholder="paste text here"></textarea>