在 JavaScript 中,你可以使用 Clipboard API 或者 Document.execCommand 方法来复制文本到剪贴板。Clipboard API 是现代浏览器中推荐使用的方式,但为了兼容性,我们也会提到 Document.execCommand 方法。
使用 Clipboard API
function copyToClipboard(text) {
navigator.clipboard.writeText(text)
.then(() => {
console.log('Text successfully copied to clipboard');
})
.catch(err => {
console.error('Unable to copy text to clipboard', err);
});
}
// 使用示例
const textToCopy = 'Hello, Clipboard!';
copyToClipboard(textToCopy);
这个例子中,我们定义了一个 copyToClipboard 函数,它使用 navigator.clipboard.writeText(text) 来异步写入文本到剪贴板。这个方法返回一个 Promise,可以通过 .then() 处理成功的情况,或者通过 .catch() 处理失败的情况。
使用 Document.execCommand 方法
function copyToClipboardLegacy(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
// 将 textarea 元素添加到 DOM 中
document.body.appendChild(textArea);
// 选择文本
textArea.select();
try {
// 尝试执行复制命令
document.execCommand('copy');
console.log('Text successfully copied to clipboard');
} catch (err) {
console.error('Unable to copy text to clipboard', err);
} finally {
// 移除添加的 textarea 元素
document.body.removeChild(textArea);
}
}
// 使用示例
const textToCopyLegacy = 'Hello, Clipboard (legacy)!';
copyToClipboardLegacy(textToCopyLegacy);
这个例子中,我们创建了一个临时的 textarea 元素,将文本赋值给它,然后将它添加到 DOM 中,选择文本,执行复制命令,最后将它从 DOM 中移除。这是为了模拟将文本复制到剪贴板的操作。
请注意,使用 Clipboard API 是更现代、更可靠的方式,但 Document.execCommand 方法在一些浏览器中仍然能够提供兼容性。最好根据你的项目需求和浏览器支持情况来选择使用哪种方法。