JS实现内容复制功能

要在JavaScript中实现内容复制功能，你可以使用document.execCommand()方法或Clipboard API。下面我将为您提供两种实现方法的示例代码，同时满足您的各种要求。

方法一：使用document.execCommand()

// 创建一个按钮，点击它来触发复制功能
var copyButton = document.createElement("button");
copyButton.innerText = "复制文本";
document.body.appendChild(copyButton);

// 将要复制的文本内容存储在一个变量中
var textToCopy = "这是要复制的文本内容";

// 绑定点击事件处理程序，触发复制操作
copyButton.addEventListener("click", function() {
    // 创建一个临时的textarea元素来容纳文本
    var textarea = document.createElement("textarea");
    textarea.value = textToCopy;
    document.body.appendChild(textarea);
    textarea.select();

    // 使用document.execCommand('copy')方法执行复制操作
    var successful = document.execCommand('copy');

    // 从DOM中移除临时的textarea元素
    document.body.removeChild(textarea);

    // 检查复制是否成功
    if (successful) {
        alert("文本已成功复制到剪贴板");
    } else {
        alert("复制操作失败，请手动复制文本");
    }
});

方法二：使用Clipboard API

// 创建一个按钮，点击它来触发复制功能
var copyButton = document.createElement("button");
copyButton.innerText = "复制文本";
document.body.appendChild(copyButton);

// 将要复制的文本内容存储在一个变量中
var textToCopy = "这是要复制的文本内容";

// 绑定点击事件处理程序，触发复制操作
copyButton.addEventListener("click", function() {
    // 使用Clipboard API将文本复制到剪贴板
    navigator.clipboard.writeText(textToCopy)
        .then(function() {
            alert("文本已成功复制到剪贴板");
        })
        .catch(function(err) {
            console.error("复制操作失败: " + err);
            alert("复制操作失败，请手动复制文本");
        });
});

这两种方法都可以在点击按钮时将指定文本内容复制到剪贴板。第一种方法使用document.execCommand()，而第二种方法使用现代的Clipboard API。Clipboard API更加强大且推荐使用，但需要浏览器支持。根据您的需求和浏览器兼容性，可以选择其中一种方法来实现内容复制功能。这两种方法都很简单易懂，用户点击按钮后会收到相应的反馈。