JavaScript `document.execCommand('copy')` 显示成功（返回 `true`），但没有向剪贴板写入任何内容答案

【问题标题】：JavaScript `document.execCommand('copy')` appears successful (returns `true`), but does not write anything to clipboardJavaScript `document.execCommand('copy')` 显示成功（返回 `true`），但没有向剪贴板写入任何内容
【发布时间】：2018-08-01 13:38:09
【问题描述】：

当用户单击按钮时，我试图将文本值从隐藏元素复制到用户剪贴板。

我使用的是 ES6，用 Webpack 和 Grunt 处理。

这些是我用来参考的文章：

MDN: Interact with the clipboard

Google: Cut and Copy Commands

我正在使用document.execCommand('copy')。我还不知道这种方法有任何浏览器兼容性问题。

这里是相关的标记：

<div class="icon-link">
  <a href="">
    <svg id="copy_button" ... /></svg>
  </a>

  <p id="copy_confirm">Copy Link</p>
</div>

...

<p id="copy_text" style="display:none;">[text content to copy]</p>

这里是相关的 JavaScript：

const copyBtn = document.getElementById('copy_button');
const copyText = document.getElementById('copy_text');

const copyLink = (e) => {
  e.preventDefault();

  const range = document.createRange();
  range.selectNode(copyText);
  window.getSelection().addRange(range);

  try {
    const successful = document.execCommand('copy');

    const msg = successful ? 'successful' : 'unsuccessful';
    global.console.log(`Copy command was ${msg}`);
  } catch (err) {
    global.console.log('Oops, unable to copy');
  }

  window.getSelection().removeAllRanges();
};

doc.addEventListener('DOMContentLoaded', () => {
  copyBtn.addEventListener('click', copyLink);
});

当我单击按钮时，我会在控制台中看到“成功”消息。我可以通过在控制台中手动运行此代码来验证选择元素并执行document.execCommand('copy') 返回true。

但我剪贴板的内容没有改变。

我已验证页面在隐藏元素中使用正确的文本值呈现。

我尝试将标记的结构更改为不同的元素类型，以及显示元素而不是隐藏元素的样式；这些都没有效果。

我已经尝试使用上面 MDN 文章中的 Element.select() 方法和 Google 文章中基于 Range 的方法（如图所示）；两者都表现出相同的行为。

我还看到了一些关于使用document.execCommand() 的其他问题，但它们似乎都处理与返回false 的函数相关的问题。我还没有找到任何可以解决我所看到的行为的方法。

我在最近的 Chrome 和 Firefox 中进行了测试。

你能帮我理解为什么我的剪贴板的内容没有改变吗？

【问题讨论】：

无法隐藏选择它。
@epascarello 我已经尝试过隐藏和不隐藏的字段；我不能说它有什么不同。能详细点吗？
@epascarello 今天命运改变了他们的气质，你是对的。

标签： javascript html webpack ecmascript-6 gruntjs

【解决方案1】：

我今天一定尝试了一些不同于我之前尝试从可见字段复制的尝试；问题现已解决。

这是我正在使用的标记：

<div class="icon-link copy-link">
  <a href="">
    <svg id="copy_button" ... /></svg>
  </a>

  <p id="copy_confirm">Copy Link</p>
</div>

<input id="copy_text" type="text" value="[text content to copy]"/>

似乎在 JavaScript 中，Element.select() 或 range.selectNode() 方法都可以正常工作。我从上面保持不变。

对于任何好奇的人，我现在用transform: translateX(); 和一个非常大的负值隐藏<input> 元素。

【讨论】：