首頁 >web前端 >js教程 >如何快速找出剪貼簿中的內容

如何快速找出剪貼簿中的內容

WBOY
WBOY原創
2024-08-17 20:30:361002瀏覽

How to Quickly Find Out What’s in Your Clipboard

存取剪貼簿的 JavaScript 技術:

1.使用剪貼簿 API (navigator.clipboard.readText):

剪貼簿 API 提供了一種安全的方式來讀取和寫入剪貼簿。以下是如何使用 navigator.clipboard.readText() 從剪貼簿快速檢索文字資料。

async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        console.log('Clipboard content:', text);
        alert('Clipboard content: ' + text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

// Trigger the function
getClipboardContent();

2。使用按鈕取得剪貼簿內容:
有時,您可能希望僅在使用者點擊按鈕時觸發剪貼簿讀取。操作方法如下:

<button onclick="getClipboardContent()">Show Clipboard Content</button>

<script>
async function getClipboardContent() {
    try {
        const text = await navigator.clipboard.readText();
        alert('Clipboard content: ' + text);
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}
</script>

3。處理剪貼簿存取權限:
Clipboard API 需要使用者權限,因此妥善處理可能的權限問題非常重要。以下是如何在嘗試讀取或寫入剪貼簿之前確保您擁有權限的方法:

async function getClipboardContent() {
    try {
        // Request permission to read from the clipboard
        const readPermission = await navigator.permissions.query({ name: 'clipboard-read' });
        if (readPermission.state === 'granted' || readPermission.state === 'prompt') {
            const text = await navigator.clipboard.readText();
            alert('Clipboard content: ' + text);
        } else {
            alert('Clipboard read access denied');
        }
    } catch (err) {
        console.error('Failed to read clipboard contents:', err);
    }
}

async function writeToClipboard(text) {
    try {
        // Request permission to write to the clipboard
        const writePermission = await navigator.permissions.query({ name: 'clipboard-write' });
        if (writePermission.state === 'granted' || writePermission.state === 'prompt') {
            await navigator.clipboard.writeText(text);
            alert('Text copied to clipboard: ' + text);
        } else {
            alert('Clipboard write access denied');
        }
    } catch (err) {
        console.error('Failed to write to clipboard:', err);
    }
}

寫入剪貼簿的範例

<button onclick="writeToClipboard('Hello, World!')">Copy "Hello, World!" to Clipboard</button>

完整範例程式碼
您可以在 GitHub Gist 上找到完整的範例程式碼,以快速了解剪貼簿中的內容。

如果這篇文章讓您的開發生活變得更輕鬆,請點擊那顆心 ❤️ 並繼續學習更多 JavaScript 魔法!

以上是如何快速找出剪貼簿中的內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn