I have this code that works:

let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');

as you can see - I have the string to copy in hand. But I have to create a temporary hidden DOM element to score the string before copying to the clipboard.

My question is, is there some API to copy to clipboard without needing the DOM at all? something like this:

document.execCommand('copy', 'the string data to put in clipboard');

seems weird that the DOM is necessary to do this. Also, as a side note, this clipboard API is super strange, anyone else agree?

I have this code that works:

let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');

as you can see - I have the string to copy in hand. But I have to create a temporary hidden DOM element to score the string before copying to the clipboard.

My question is, is there some API to copy to clipboard without needing the DOM at all? something like this:

document.execCommand('copy', 'the string data to put in clipboard');

seems weird that the DOM is necessary to do this. Also, as a side note, this clipboard API is super strange, anyone else agree?

• javascript
• dom
• browser
• google-chrome-extension
• clipboard

• 2 Some things in browser require a user event to prevent malicious or abusive unwanted actions – charlietfl Commented Jan 11, 2018 at 21:12
• yeah but in this case, there is no click or anything, there is no user event that I can think of? – user7898461 Commented Jan 11, 2018 at 21:16
• 1 You normally need a user event to initialize it writing to the clipboard. And for the longest time you could not do it. Wrap it in a simple helper function and it will be easy to call. – epascarello Commented Jan 11, 2018 at 21:17
• 2 No, there's no such API. – woxxom Commented Jan 11, 2018 at 21:19
• 1 The only alternative to DOM is to write an external utility, separately installed, which can municate via nativeMessaging API with the extension and use OS to copy to the clipboard, but obviously this "solution" is even worse. – woxxom Commented Jan 11, 2018 at 21:21

2 Answers 2

You can use the asynchronous Clipboard API which is used to implement cut, copy, and paste features within a web application but keep in mind that it works with secured connection(HTTPS) and localhost.

const copyToClipboard = (textToCopy) => {
   navigator.clipboard.writeText(textToCopy)
   .then(() => {
      // actions to take
   })
   .catch(err => {
      console.log('Something went wrong', err);
   });
 }

I recently faced the same question like you but none of solution provided the solution without affecting DOM. Following built-in function help you.

copyToClipboard("Your variable/string")

copyToClipboard function allows you to copy the variable or strings to the system clipboard. This is a part of Clipboard API click for Docs.