JavaScript - 将随机生成的文本值复制到剪贴板答案

【问题标题】：JavaScript - Copying randomly generated text value to the clipboardJavaScript - 将随机生成的文本值复制到剪贴板
【发布时间】：2018-04-12 19:43:20
【问题描述】：

我最近构建了一个非常简单的工具来随机生成颜色和渐变。我想添加一个按钮来复制生成的颜色/渐变的 CSS。我创建了一个生成 CSS 颜色的变量，那么如何设置一个函数来将该生成的值复制到剪贴板？

这是基本的 HTML：

<section>
     <div id="card">
          <div id="generated-color"></div>
          <h1 id="color-text"></h1>
     </div>
     <button onclick="random_color()">Generate</button>
</section>

这里是JS函数：

function random_color() {
     var color = 'rgb(' + [Math.floor(Math.random() * 256)] + ',' + [Math.floor(Math.random() * 256)] + ',' + [Math.floor(Math.random() * 256)] + ')';
     document.getElementById('generated-color').style.background = color;
     document.getElementById("color-text").innerHTML = color;
}

所以基本上，我该如何复制生成的“颜色”变量？

这是该网站的现场演示：https://color.lukecjohnson.com

【问题讨论】：

您是否尝试搜索此问题的答案？ stackoverflow.com/questions/400212/…
How do I copy to the clipboard in JavaScript?的可能重复

标签： javascript random copy-paste

【解决方案1】：

最好的方法是创建一个“不可见”文本框，将其聚焦，然后使用execCommand 触发剪贴板复制事件。

function copyRandom(rand){
  let input = document.createElement("input");

  input.style.opacity="0";
  input.style["pointer-events"] = "none";
  document.body.appendChild(input);
  input.value = rand;
  input.focus();
  input.select();
  document.execCommand('copy');
  alert('copied!')
}

所以...

function random_color(){
  ...
  copyRandom(color);
}

或者您可以使用 Flash 解决方案。

【讨论】：

【解决方案2】：

您可以像这样直接将文本从标签复制到剪贴板：

document.getElementById('generate').addEventListener('click', function () {
  var text = document.getElementById('color-text').innerText;

  function listener(e) {
    e.clipboardData.setData('text/plain', text);
    e.preventDefault();
  }

  document.addEventListener('copy', listener);
  document.execCommand('copy');
  document.removeEventListener('copy', listener);
});

【讨论】：