在网页中如何实现一键复制的功能

第一种方法 使用Clipboard API

<!-- HTML -->
<div id="copyText">要复制的内容</div>
<button onclick="copyToClipboard()">复制</button>

// JavaScript
function copyToClipboard() {
  const copyText = document.getElementById("copyText").innerText;
  navigator.clipboard.writeText(copyText).then(function() {
    alert("已成功复制到剪贴板");
  }).catch(function() {
    alert("复制失败");
  });
}

第二种方法 使用第三方库（如clipboard.js）

<!-- HTML -->
<div id="copyText">要复制的内容</div>
<button class="btn" data-clipboard-target="#copyText">复制</button>

// JavaScript
// 引入clipboard.js库文件

// 实例化Clipboard对象
new ClipboardJS('.btn');

// 或者使用JavaScript实例化
// const btn = document.querySelector('.btn');
// const clipboard = new ClipboardJS(btn, {
//   target: function(trigger) {
//     return trigger.getAttribute('data-clipboard-target');
//   }
// });

// 复制成功时的提示
document.addEventListener('clipboard-success', function(e) {
  alert("已成功复制到剪贴板");
});

// 复制失败时的提示
document.addEventListener('clipboard-error', function(e) {
  alert("复制失败");
});

第三种 利用input

// html
<div id="copyText">要复制的内容</div>
<button onclick="copyToClipboard()">复制</button>

//Javascript
function copyToClipboard() {
  // 获取要复制的文本元素
  const copyText = document.getElementById("copyText");

  // 创建一个新的<input>元素
  const input = document.createElement("input");

  // 设置<input>元素的值为要复制的文本
  input.value = copyText.innerText;

  // 将<input>元素添加到DOM中，便于执行复制操作
  document.body.appendChild(input);

  // 选中<input>元素中的文本
  input.select();

  // 执行复制操作
  document.execCommand("copy");

  // 从DOM中移除<input>元素
  document.body.removeChild(input);

  // 提示用户复制成功（可选）
  alert("复制成功！");
}