J'aimerais connaître un moyen de faire en sorte que mon script détecte le contenu du presse-papiers et le colle dans un champ de texte lorsque la page est ouverte, sans intervention de l'utilisateur. Comment ceci peut être fait?
J'aimerais connaître un moyen de faire en sorte que mon script détecte le contenu du presse-papiers et le colle dans un champ de texte lorsque la page est ouverte, sans intervention de l'utilisateur. Comment ceci peut être fait?
Réponses:
window.clipboardData.getData('Text')
fonctionnera dans certains navigateurs. Cependant, de nombreux navigateurs où cela fonctionne inviteront l'utilisateur à savoir s'il souhaite ou non que la page Web ait accès au presse-papiers.
Utilisez la nouvelle API de presse-papiers , via navigator.clipboard
. Il peut être utilisé comme ceci:
navigator.clipboard.readText()
.then(text => {
console.log('Pasted content: ', text);
})
.catch(err => {
console.error('Failed to read clipboard contents: ', err);
});
Ou avec la syntaxe asynchrone:
const text = await navigator.clipboard.readText();
Gardez à l'esprit que cela invitera l'utilisateur avec une boîte de dialogue de demande d'autorisation, donc aucune activité amusante possible.
Le code ci-dessus ne fonctionnera pas s'il est appelé depuis la console. Cela ne fonctionne que lorsque vous exécutez le code dans un onglet actif. Pour exécuter le code depuis votre console, vous pouvez définir un délai d'expiration et cliquer rapidement dans la fenêtre du site Web:
setTimeout(async () => {
const text = await navigator.clipboard.readText();
console.log(text);
}, 2000);
En savoir plus sur l'API et son utilisation dans la documentation des développeurs Google .
setTimeout
, puis en cliquant à nouveau sur la page.
Vous pouvez utiliser
window.clipboardData.getData('Text')
pour obtenir le contenu du presse-papiers de l'utilisateur dans IE. Cependant, dans un autre navigateur, vous devrez peut-être utiliser flash pour obtenir le contenu, car il n'y a pas d'interface standard pour accéder au presse-papiers. Peut-être pouvez-vous essayer ce plugin Zero Clipboard
La suite vous donnera le contenu sélectionné ainsi que la mise à jour du presse-papiers.
Liez l'ID d'élément avec l'événement de copie, puis obtenez le texte sélectionné. Vous pouvez remplacer ou modifier le texte. Obtenez le presse-papiers et définissez le nouveau texte. Pour obtenir la mise en forme exacte, vous devez définir le type sur "text / hmtl". Vous pouvez également le lier au document au lieu de l'élément.
document.querySelector('element').bind('copy', function(event) {
var selectedText = window.getSelection().toString();
selectedText = selectedText.replace(/\u200B/g, "");
clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
clipboardData.setData('text/html', selectedText);
event.preventDefault();
});