document.execCommand("copy") not working on all browser

Question

<input id="test" value="Test" disabled />
<a onclick="copy()">Button</a>

function copy(){
   var text = document.getElementById("test");

   text.select();
   document.execCommand("copy");

   console.log("Copied the text: " + text.value);
}

I have above function to copy my copy. But its not working.

Answer 1

There are a few issues with your code:

• disable attribute on the input has to actually be disabled
• when you set disabled on the input, you cannot select its text in order to copy it, so you might either want to use readonly in this case or set text.value manually via navigator.clipboard.writeText(text.value)
• The Clipboard API is not available in all browsers, see https://caniuse.com/#feat=clipboard . For a long time, people used Flash for clipboard operations, but with Flash support being removed from browsers, there are not any options left. However, there are libraries like clipboard.js that streamline clipboard operations across supported browsers.

 function copy(){ var text = document.getElementById("test"); // set arbitrary value instead of current selection // to clipboard to make it work with a disabled input as well navigator.clipboard.writeText(text.value); // text.select(); //document.execCommand("copy"); console.log("Copied the text: " + text.value); } function copy2(){ var text = document.getElementById("test2"); text.select(); document.execCommand("copy"); console.log("Copied the text: " + text.value); }

 <input id="test" value="Test" disabled /> <a onclick="copy()">Button</a> <hr> <h3>using <code>document.execCommand("copy")</code></h3> <input id="test2" value="Test2" readonly /> <a onclick="copy2()">Button</a>

Answer 2

You could use this clipboard.js library. It has a great browser support.