CODEWITHSUNDEEP
javascriptgoogle-chromedomdocumentexeccommand
Domi
Domi

Reputation: 24578

Cannot use `document.execCommand('copy');` from developer console

Calling document.execCommand('copy'); from the Chrome developer console returns false every time.

Give it a try yourself. Open the console and run it, it never succeeds.

Any idea as to why?

enter image description here

Upvotes: 24

Views: 34880

Answers (4)

div-wang
div-wang

Reputation: 1

This method works in the latest version of 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'
    })
  }
}

Upvotes: 0

gilly3
gilly3

Reputation: 91527

As an alternative, use the copy() command that is built in to the Chrome Dev tools. You can't use document.execCommand("copy") because that requires user action to trigger it.

The copy() command allows you to copy any string (or object as JSON). To emulate document.execCommand("copy") you can get the current selection with getSelection().toString():

copy(getSelection().toString())

screen shot

If you need to actually test document.execCommand("copy") specifically (for example, to debug a script that uses it), and using the debugger isn't ideal for some reason, you can wrap your code in a click handler, and then click your page:

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

Upvotes: 8

Julien Grégoire
Julien Grégoire

Reputation: 17144

document.execCommand('copy') must be triggered by the user. It's not only from the console, it's anywhere that's not inside an event triggered by the user. See below, the click event will return true, but a call without event won't and a call in a dispatched event also.

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>

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

Copy commands triggered from document.execCommand() will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this. How implementations can be configured to allow write access to the clipboard is outside the scope of this specification.

Upvotes: 43

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

I believe, copy command requires to be having the focus on the browser, and when you go to Console and execute the command, the current window loses focus. But could be other reasons, as it worked if I give in setTimeout().

Upvotes: 2

Related Questions