document.execCommand("copy") 有时会失败，但并非总是如此

Question

I have a function which is invoked on double click event handler. I call below function on dblclick event passing the target text as paremeter texttocopy.

copyToClipboard = function (texttocopy) {
    'use strict';
    var answer = confirm(`Do you want to copy into the clipbaord `);
    if (answer == true) {
        let input = document.createElement('textarea');
        input.innerHTML = texttocopy;
        document.body.appendChild(input);
        input.select();
        let result = document.execCommand('copy', false);
        document.body.removeChild(input);
        if (result) return;
        else alert("Failed to copy to clipboard");
    }

}

If I press on Ok of the confirm popup in say 2 secs, my code is successful but if I press after 5-10 secs, its failing. My understanding is that document.exeCommand works on short lived user generated event handlers. But I want to understand what actually counts as a "short-lived event," Is there a way I can make this successful programmatically.

Answer 1

As you already mentioned:

These commands can be used without any special permission if you are using them in a short-lived event handler for a user action (for example, a click handler). ( source )

The problem you're running into is that you're using confirm . This dialog breaks the normal flow (it halts operation), which breaks you our of that event handler's scope.

Removing that confirm should fix your problem:

 copyToClipboard = function (texttocopy) { 'use strict'; var answer = true; //confirm(`Do you want to copy into the clipbaord `); if (answer == true) { let input = document.createElement('textarea'); input.innerHTML = texttocopy; document.body.appendChild(input); input.select(); let result = document.execCommand('copy', false); document.body.removeChild(input); if (result) return; else alert("Failed to copy to clipboard"); } } document.getElementById('copy').addEventListener('click', () => copyToClipboard( 'Copy this text to the clipboard;'));

 <button type="button" id="copy">Click me!</button>