JS如何使用剪贴板操作Clipboard API

关于如何使用JavaScript操作剪贴板Clipboard API，我们可以从以下内容着手：

什么是Clipboard API？

Clipboard API 是一种浏览器内置的API，它允许JavaScript从系统剪贴板中复制、获取或粘贴数据。

如何使用Clipboard API？

首先要使用 Clipboard API 需要先访问到 navigator 的 clipboard 对象，然后可以调用该对象上的方法。

navigator.clipboard

复制剪贴板的内容

要复制剪贴板，可以使用 writeText() 方法。

navigator.clipboard.writeText('copy content')
    .then(() => {
        console.log('Content copied to clipboard!');
    })
    .catch(err => {
        console.error('Could not copy text: ', err);
    });

此代码行将“copy content”复制到系统剪贴板中。如果剪贴内容被成功复制，则回调将显示“Content copied to clipboard!”。否则，它会抛出错误并console.log错误。

简介：writeText()方法会返回一个Promise，所以我们需要使用.then()和.catch() 来处理 Promise 的回调。

获取剪贴板的内容

要获取剪贴板的内容，可以使用 readText() 方法。

navigator.clipboard.readText()
    .then(text => {
        console.log(`Pasted content: ${text}`);
    })
    .catch(err => {
        console.error('Failed to read clipboard contents: ', err);
    });

此代码块从系统剪贴板中读取内容，并在成功时用“Pasted content: ”消息记录该内容，如果出现错误，则在 Console 中打印错误。

示例说明

示例1：复制按钮

让我们考虑一个按钮点击处理程序的示例。当用户单击按钮时，我们将当前页面的URL复制到剪贴板中。

HTML：

<button id="copyButton">Copy Page URL</button>

JS：

const copyButton = document.querySelector('#copyButton');

copyButton.addEventListener('click', () => {
    const currentUrl = window.location.href;

    navigator.clipboard.writeText(currentUrl)
        .then(() => {
            console.log(`URL copied: ${currentUrl}`);
        })
        .catch((err) => {
            console.error(`Could not copy URL: ${err}`);
        });
});

上面代码中，我们将ID为 copyButton 的按钮查询出来，并在单击事件中将 window.location.href 复制到剪贴板中。如果剪贴板中的内容被成功复制，则在 Console 中用消息记录当前URL。

示例2：粘贴事件

粘贴事件也是常用的一个事件。例如我们可以监听输入框的粘贴事件，如果有内容粘贴进去，我们就将这些内容进行一些处理。

HTML：

<input type="text" id="inputText" placeholder="Paste here" />

JS：

const inputText = document.querySelector('#inputText'); 

inputText.addEventListener('paste', (event) => {
    const paste = (event.clipboardData || window.clipboardData).getData('text');

    // 在这里做你想做的事情...
});

上面代码中，我们监听了输入框 inputText 的粘贴事件，在事件回调中，我们使用 clipboardData 或 window.clipboardData 获取复制到剪贴板中的内容。然后在继续下一步处理或把它显示在输入框中。

这就是关于如何使用JavaScript使用剪贴板Clipboard API的攻略。