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

【问题标题】：Copy text innerHTML of element to clipboard将元素的文本 innerHTML 复制到剪贴板
【发布时间】：2017-07-04 14:16:44
【问题描述】：

我在 stackoverflow 中尝试了很多解决方案，但都不起作用。（here 和 here）

我在Website 中尝试并使用chrome extension 运行代码（chrome 59.0.3071.104 64bit）

<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

有什么解决办法吗？谢谢。

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

【问题讨论】：

console.log (document.queryCommandSupported('copy')) 这个命令有什么输出？
它写“真”
你试过this option吗？
@Saravana: window.getSelection().addRange(range);sellect 也成功了。
可以销售但不能复制

标签： javascript

【解决方案1】：

这是一种快速的 hacky 方式来做你想做的事，有一个隐藏的输入，我们将数据放入其中，然后从那里复制它。（文本区域只是粘贴的地方）

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" />

【讨论】：

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");
它也失败了，我认为问题是页面加载。加载页面时所有解决方案（按钮）都成功
这对我不起作用另外，为什么不？

【解决方案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>

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

【讨论】：

要在页面加载时调用该函数，您可以使用 jQuery $.ready() 或者如果您不想使用 jQuery，您可以按照以下说明进行操作：pure JavaScript equivalent to jQuery's $.ready()
@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"); }); 它仍然失败:(
你好，进一步研究我在 W3 规范中发现了以下内容：Clipboard API and events 基本上它是说你不能与剪贴板交互，而是用户触发操作（单击一个按钮左右）。我认为您无法在 document.ready 或类似文件中编辑用户剪贴板:(
嗯，我考虑解决方案添加一个按钮来复制该文本并将 print() 打印到 pdf。（并在单击时隐藏该按钮 - 不打印该按钮）
在 Chrome 中不起作用：[弃用] Selection.addRange() 合并现有 Range 并删除指定 Range 的行为。有关详细信息，请参阅chromestatus.com/features/6680566019653632。

【解决方案3】：

这里是第一个例子。 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>

【讨论】：