如何在浏览器JavaScript中实现“复制到剪贴板”？

Question

如何用JavaScript实现“复制到剪贴板”？有没有办法在 HTML 中添加 JS 脚本，允许“复制到剪贴板”按钮？ 下图中的示例。 当您按下复制按钮时，命令将被复制到剪贴板

示例来自 https://hub.docker.com/r/jboss/keycloak/

Answer 1

您既不能用纯 Markdown 也不能用纯 HTML 来执行此操作。此功能由静态站点生成器（例如，Docusaurus）提供，并且在幕后使用 JavaScript。检查这个超级简单的教程以获取有关其工作原理的更多帮助。

Answer 2

有这样的事吗？单击按钮时，使用

textarea

 选择 

select() 中的文本，并使用

navigator.clipboard.writeText

将其复制到剪贴板

function copyCode(el) {
  let copyText = el.nextElementSibling;
  // Select the text field
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices
  console.log(copyText.value);
  // Copy the text inside the text field
  navigator.clipboard.writeText(copyText.value)
    .then(() => {
      alert("successfully copied");
    })
    .catch((error) => {
      alert(error);
    });
}

.copyButton {
  position: relative;
  float: right;
  background: transparent;
  border: none;
  margin-top: 6px;
}

textarea {
  border: 0px solid black;
  width: 100%;
  height: 130px;
  margin: 0;
  padding: 0;
  resize: none;
  overflow-y: hidden;
  background-color: dimGray;
  color: white;
}

textarea:focus {
  outline: none;
}

.material-icons {
  color: lightGray;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<pre style="width:100%;background-color:dimGray;color:white">
<button class="copyButton" onclick="copyCode(this);"><i class="material-icons">content_copy</i></button>
<textarea type="text" style="">
// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;
</textarea>
</pre>