Maison  >  Article  >  interface Web  >  Comment découvrir rapidement le contenu de votre presse-papiers

Comment découvrir rapidement le contenu de votre presse-papiers

WBOY
WBOYoriginal
2024-08-17 20:30:36944parcourir

How to Quickly Find Out What’s in Your Clipboard

Techniques JavaScript pour accéder au Presse-papiers :

1.Utilisation de l'API Clipboard (navigator.clipboard.readText) :

L'API Clipboard offre un moyen sécurisé de lire et d'écrire dans le presse-papiers. Voici comment utiliser navigator.clipboard.readText() pour récupérer rapidement des données texte du presse-papiers.

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. Utilisation d'un bouton pour récupérer le contenu du presse-papiers :
Parfois, vous souhaiterez peut-être déclencher la lecture du presse-papiers uniquement lorsque l'utilisateur clique sur un bouton. Voici comment procéder :

<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. Gestion des autorisations pour l'accès au Presse-papiers :
L'API Clipboard nécessite l'autorisation de l'utilisateur, il est donc important de gérer les éventuels problèmes d'autorisation avec élégance. Voici comment vous assurer que vous disposez de l'autorisation avant d'essayer de lire ou d'écrire dans le presse-papiers :

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

Exemple d'écriture dans le presse-papier

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

Exemple de code complet
Vous pouvez trouver l’exemple de code complet pour découvrir rapidement ce qu’il y a dans votre presse-papiers ici sur GitHub Gist.

Si cet article a rendu votre vie de développement un peu plus facile, appuyez sur ce cœur ❤️ et restez dans les parages pour plus de magie JavaScript !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn