How to Quickly Find Out What’s in Your Clipboard

JavaScript Techniques to Access Clipboard:

1.Using the Clipboard API (navigator.clipboard.readText):

The Clipboard API provides a secure way to read from and write to the clipboard. Here's how you can use navigator.clipboard.readText() to quickly retrieve text data from the clipboard.

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. Using a Button to Fetch Clipboard Content:
Sometimes, you may want to trigger clipboard reading only when the user clicks a button. Here's how you can do it:

Show Clipboard Content 

3. Handling Permissions for Clipboard Access:
The Clipboard API requires user permission, so it’s important to handle possible permission issues gracefully. Here’s how to ensure you have permission before attempting to read or write to the clipboard:

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); } }

Example of writing to the clipboard

Copy "Hello, World!" to Clipboard

Complete Example Code
You can find the full example code to quickly find out what’s in your clipboard here on GitHub Gist.

If this article made your development life a bit easier, tap that heart ❤️ and stick around for more JavaScript magic!

The above is the detailed content of How to Quickly Find Out What’s in Your Clipboard. For more information, please follow other related articles on the PHP Chinese website!