1.Utilisation de l'API Clipboard (navigator.clipboard.readText) :
L'API Clipboard fournit 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. Utiliser 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 :
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
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!