Question

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

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

$('#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>

无法使document.execCommand（“ copy”）正常工作

1 个答案: