0

It's not a duplicate question because I'm asking why, not how

If I paste everything between the <script></script> into the chrome console and press enter, it works perfectly, but when I load it with html, it doesn't work, why?

<!DOCTYPE html>
<html>
<head></head>
<body></body>

<script>

  toClipboard('Hello World!');

  function toClipboard(someText) {
  //This function copies some text into your clipboard.
  //It's an ugly workaround, because there's no built-in function in JS that does this job.
    var temp = document.createElement('input');
    document.body.appendChild(temp);
    temp.value = someText;
    temp.select();
    document.execCommand('copy');
    document.body.removeChild(temp);
    console.log('"' + someText + '" should have been copied to your clipboard');
  }

</script>
</html>
DrZYin
  • 145
  • 10
  • 3
    Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – jmargolisvt Jan 23 '18 at 19:17
  • It works in web storm. How do you start it? – Nikola Andreev Jan 23 '18 at 19:20
  • @NikolaAndreev I just start it by loading the html – DrZYin Jan 23 '18 at 19:22
  • 1
    Is the input visible? It must be visible at the time you execute the copy command, (this is maybe browser dependent). Also, most of the browsers have some kind of an option, with which user can turn the usage of the clipboard off from the code. Additionally, you've to call `execCommand('copy')` from an event handler user has triggered, otherwise the command is not executed. – Teemu Jan 23 '18 at 19:32
  • Pretty sure that duplicate covers the **why**. – zero298 Jan 23 '18 at 19:48
  • @Teemu your last sentence was correct, thanks! – DrZYin Jan 23 '18 at 19:51
  • They all are, though zero298's sentence is too ... – Teemu Jan 23 '18 at 19:52

1 Answers1

0

Your code may not work in some browsers if you run it without user's interaction.

To check if execCommand was executed successfully, you can check it's return value (it would be false in OP's example):

// `execCommand` returns `false` if was not executed successfully
var res = document.execCommand('copy');


toClipboard('Hello World!');

function toClipboard(someText) {
  //This function copies some text into your clipboard.
  //It's an ugly workaround, because there's no built-in function in JS that does this job.
    var temp = document.createElement('input');
    document.body.appendChild(temp);
    temp.value = someText;
    temp.select();
    var res = document.execCommand('copy');
    document.body.removeChild(temp);
    console.log(res ? '"' + someText + 
      '" should have been copied to your clipboard' : 'Copying was not successful');
}

Solution: call toClipboard when user clicks on button:

function toClipboard(someText) {
  //This function copies some text into your clipboard.
  //It's an ugly workaround, because there's no built-in function in JS that does this job.
    var temp = document.createElement('input');
    document.body.appendChild(temp);
    temp.value = someText;
    temp.select();
    var res = document.execCommand('copy');
    document.body.removeChild(temp);
    console.log(res ? '"' + someText + 
      '" should have been copied to your clipboard' : 'Copying was not successful');
}
<button onclick="toClipboard('Hello World!');">Copy text to clipboard</button>
Kos
  • 4,890
  • 9
  • 38
  • 42