将元素的文本innerHTML复制到剪贴板

Question

我在stackoverflow上尝试了许多解决方案，但都没有生效（这里和这里）。

我在网站上尝试，并使用chrome扩展程序运行代码（chrome 59.0.3071.104 64位版本）。

<h4 align="center">text data to copy</h4>

var copy_text = document.getElementsByTagName("h4")[0];
copy_text.select(); //-> error: select is not a function

并且

var range = document.createRange();
range.selectNode(copy_text);
window.getSelection().addRange(range);
document.execCommand("copy"); //-> clipboard not change

有没有解决这个问题的方案？谢谢。

---

编辑：我认为我的问题是页面加载（安全浏览器），所有的解决方案都需要用户交互。

- Trương Quốc Khánh

---

console.log（document.queryCommandSupported（'copy'）） 使用此命令，您会得到什么输出？ - qiAlex

它写入“true”。 - Trương Quốc Khánh

你尝试过这个选项了吗？ - Saravana

@Saravana：window.getSelection().addRange(range); 选择成功。 - Trương Quốc Khánh

可以选择但无法复制。 - Trương Quốc Khánh

Answer 1

这里是第一个例子。https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f。我的示例是根据我的需求重新编写的，但您会明白的：)

<div onclick="bufferText()">Миньор Перник!</div>
<script>
   function bufferText() {    
        const el = document.createElement("textarea");
        el.value = event.target.innerHTML;
        document.body.appendChild(el);
        el.select();
        document.execCommand("copy");
        document.body.removeChild(el);
   }
</script>

- MetaTron

Answer 2

这对我有效。

var copyTextareaBtn = document.querySelector('.copybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copy_text = document.getElementsByTagName("h4")[0];
  var range = document.createRange();
  range.selectNode(copy_text);
  window.getSelection().addRange(range);

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<button class="copybtn">Copy</button>
<h4 align="center">text data to copy</h4>

但是如果我在页面加载时尝试复制而非在点击时复制，它并不起作用。

- qiAlex

---

要在页面加载时调用函数，您可以使用jQuery的$.ready()，或者如果您不想使用jQuery，可以按照以下说明操作：纯JavaScript等效于jQuery的$.ready()。 - Jose Gomez

@JoseGomez: $（'document'）.ready（function（） { var copy_text = document.getElementsByTagName（"h4"）[0]; var range = document.createRange（）; range.selectNode（copy_text）; window.getSelection（）。addRange（range）; document.execCommand（"copy"）; }） 它仍然失败 :( - Trương Quốc Khánh

你好，我进一步研究了一下，发现在 W3 规范中有以下内容：剪贴板 API 和事件。基本上它说你不能与剪贴板交互，而是用户触发操作（点击按钮或其他）。我认为你不能在 document.ready 或类似情况下编辑用户的剪贴板 :( - Jose Gomez

嗯，我认为解决方案是添加一个按钮来复制该文本并将其打印到PDF中。（当单击时隐藏该按钮-不打印该按钮） - Trương Quốc Khánh

在Chrome中无法工作：[Deprecation] Selection.addRange()合并现有范围和指定范围的行为已被删除。请参见https://www.chromestatus.com/features/6680566019653632获取更多详细信息。 - robisrob

在使用addRange()之前，我必须添加selection.removeAllRanges();，然后它才能正常工作 - 在Chrome中测试过。 - TmTron

Answer 3

这里有一个快速的方法来实现你想要的功能，我们在隐藏输入框中存放数据，然后从那里复制它。 （文本区域只是用来粘贴的地方）

function copyText(e) {
  var textToCopy = document.querySelector(e);
  var textBox = document.querySelector(".clipboard");
  textBox.setAttribute('value', textToCopy.innerHTML);

  textBox.select();
  document.execCommand('copy');
}

.hidden {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}

<h4 class="text" align="center">Text data to copy</h4>

<button onclick="copyText('.text')" class="copy">Copy</button>
<br><br>
<textarea></textarea>

<input class="clipboard hidden" />

- Andrew Bone

---

var copy_text = document.getElementsByTagName("h4")[0]; var hidden_ = document.createElement("input"); hidden_.setAttribute("class","clipboard hidden"); copy_text.appendChild(hidden_); copy_text.setAttribute("class","copy_text"); function copyText(e) { var textToCopy = document.querySelector(e); var textBox = document.querySelector(".clipboard"); textBox.setAttribute('value', textToCopy.innerHTML); textBox.select(); document.execCommand('copy'); } copyText(".copy_text"); - Trương Quốc Khánh

它也失败了，我认为问题在于页面加载。所有的解决方案（按钮）都在页面加载时成功。 - Trương Quốc Khánh

这对我来说不起作用。另外，为什么不使用<input type="hidden" />？ - pixelearth