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 :

Show Clipboard Content

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 de tenter 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

Copy "Hello, World!" to Clipboard

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 !