web-dev-qa-db-fra.com

Impossible de `document.execCommand ('copy')

Appel de document.execCommand ('copie'); depuis la console de développement Chrome renvoie false à chaque fois.

Essayez-le vous-même. Ouvrez la console et lancez-la, elle ne réussit jamais.

Une idée quant à pourquoi?

 enter image description here

javascriptgoogle-chromedomdocumentexeccommand
22
Domi

document.execCommand('copy') doit être déclenché par l'utilisateur. Ce n'est pas seulement à partir de la console, c'est partout où cela ne fait pas partie d'un événement déclenché par l'utilisateur. Voir ci-dessous, l'événement click retournera true, mais un appel sans événement ne le sera pas et un appel dans un événement distribué également.

console.log('no event', document.execCommand('bold'));

document.getElementById('test').addEventListener('click', function(){
    console.log('user click', document.execCommand('copy'));
});

document.getElementById('test').addEventListener('fakeclick', function(){
    console.log('fake click', document.execCommand('copy'));
});


var event = new Event('fakeclick')

document.getElementById('test').dispatchEvent(event) ;
<div id="test">click</ha>

Voir ici: https://w3c.github.io/editing/execCommand.html#dfn-the-copy-command

Les commandes de copie déclenchées à partir de document.execCommand () n’affecteront que le contenu du presse-papier réel si l'événement est distribué à partir d'un fichier événement qui est approuvé et déclenché par l'utilisateur, ou si le l'implémentation est configurée pour permettre cela. Comment les implémentations peuvent être configuré pour autoriser l'accès en écriture au presse-papiers est en dehors de la portée de cette spécification.

37
Julien Grégoire

Vous pouvez également utiliser la commande copy() intégrée aux outils de développement Chrome. Vous ne pouvez pas utiliser document.execCommand("copy") car cela nécessite une action de l'utilisateur pour le déclencher.

La commande copy() vous permet de copier une chaîne (ou un objet au format JSON). Pour émuler document.execCommand("copy"), vous pouvez obtenir la sélection actuelle avec getSelection().toString():

copy(getSelection().toString())

screen shot

Si vous devez tester spécifiquement document.execCommand("copy") (par exemple, pour déboguer un script qui l'utilise) et que l'utilisation du débogueur n'est pas idéale pour une raison quelconque, vous pouvez envelopper votre code dans un gestionnaire de clics, puis cliquer sur votre page:

document.body.addEventListener("click", function() {
    console.log("copy", document.execCommand("copy"));
}, false);
6
gilly3

Je crois que la commande copy nécessite d’avoir le focus sur le navigateur, et lorsque vous accédez à la console et exécutez la commande, la fenêtre actuelle perd le focus. Mais il pourrait y avoir d'autres raisons, car cela a fonctionné si je donne setTimeout().

2
Praveen Kumar Purushothaman

Cette méthode fonctionne dans la dernière version de safari 

const copyUrl = (url, cb) => {
  try {
    var input = document.getElementById('copyInput')
    input.value = url
    input.focus()
    input.select()
    if (document.execCommand('copy', false, null)) {
      Message('复制成功')
    } else {
      Message({
        message: '当前浏览器不支持复制操作，请使用Ctrl+c手动复制',
        type: 'warning'
      })
    }
  } catch (e) {
    Message({
      message: `复制出错：${e}`,
      type: 'error'
    })
  }
}
0
div-wang