在 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 方法在一些浏览器中仍然能够提供兼容性。最好根据你的项目需求和浏览器支持情况来选择使用哪种方法。