引言：网页内容复制的需求
在现代网页应用中，用户经常需要将页面上的特定文本内容（如生成的代码、唯一id、链接或动态消息）复制到剪贴板，以便在其他地方使用。手动选择和复制文本虽然可行，但通过编程方式提供一个“复制”按钮，可以极大地提升用户体验和操作效率。本教程将指导您如何利用javascript实现这一功能，特别是针对h1标签中的动态文本。
核心API：navigator.clipboard.writeText
JavaScript提供了一个现代且安全的Clipboard API，用于与用户的剪贴板进行交互。其中，navigator.clipboard.writeText()方法是实现文本复制的核心。
- navigator.clipboard.writeText(text): 这个方法接收一个字符串作为参数，并尝试将其写入用户的剪贴板。
- 异步操作: writeText()方法返回一个Promise。这意味着复制操作是异步的，您需要使用.then()来处理成功复制的情况，以及使用.catch()来处理复制失败（例如，用户拒绝权限或浏览器不支持）的情况。
- 安全性: 出于安全考虑，Clipboard API通常只在安全上下文（即通过HTTPS加载的页面）中可用，并且可能需要用户授予权限。
示例场景：随机字符生成器
为了更好地演示复制功能，我们将使用一个简单的随机字符生成器作为示例。该生成器会在H1标签中显示动态生成的字符。
HTML 结构
首先，我们需要一个H1标签来显示生成的字符，以及两个按钮：一个用于生成新字符，另一个用于复制H1标签中的内容。
H1文本复制到剪贴板示例
Characters:
JavaScript 随机字符生成逻辑
接下来是生成随机字符的JavaScript代码。这段代码会随机选取数字并拼接成指定长度的字符串，然后更新到id="numberbox-el"的H1元素中。
立即学习“Java免费学习笔记（深入）”；
// NumberGen.js 内容
let numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let boxEl = document.getElementById("numberbox-el");
let numlength = 5; // 假设生成5个字符
function generateRandomDigit() {
let generateNum = Math.floor(Math.random() * numberArray.length);
return numberArray[generateNum];
}
function displayNum() {
let display = "";
for (let i = 0; i < numlength; i++) {
display += generateRandomDigit();
}
boxEl.textContent = "Characters: " + display; // 更新H1内容
}
// 页面加载完成后，绑定生成按钮事件
document.addEventListener('DOMContentLoaded', () => {
displayNum(); // 初始生成一次字符
document.getElementById("generateNum").addEventListener("click", displayNum);
});实现剪贴板复制功能
现在，我们将添加核心的复制功能。我们需要一个JavaScript函数来获取H1标签的文本内容，并使用navigator.clipboard.writeText()将其写入剪贴板。
创建复制函数
function copyToClipboard() {
// 获取H1元素中的文本内容
// 使用 .innerText 可以获取元素中用户可见的文本内容
const textToCopy = boxEl.innerText;
// 调用 Clipboard API 写入剪贴板
navigator.clipboard.writeText(textToCopy)
.then(() => {
console.log('文本已成功复制到剪贴板');
// 成功复制后，可以给用户一个反馈
alert('字符已复制到剪贴板！');
})
.catch(err => {
console.error('无法复制文本：', err);
// 复制失败时，通知用户
alert('复制失败，请手动复制或检查浏览器权限。');
});
}绑定事件
将上述copyToClipboard函数绑定到“Copy Characters”按钮的点击事件上。
// 在 NumberGen.js 中，或者在