Can't manage to copy text to clipboard in Javascript

Question

I've been having lots of issues trying to understand different methods on how to copy a text to the clipboard. I would really appreciate if someone can explain to me why my code isn't working.

<!DOCTYPE HTML> <html dark= "true" style="font-size: 50px;font-family: Roboto, Arial, sans-serif"> <body> <textarea id="copytext">ROGER</textarea> <div class="button" id="adadad"> <button onclick="copyS()" id="dlld"> </button> </div> <p> </p> <script type=text/javascript"> function copyS{ clicked = document.getElementById("dlld"); } if ("dlld" == clicked){ var am1 = document.getElementById("copytext"); document.execCommand("copy"); } } </script> <p> </p> </body> </html>

This question doesn't seem to be a duplicate. The problem isn't related to stackoverflow.com/questions/400212/… — Barry Michael Doyle
– Barry Michael Doyle, Commented Apr 3, 2020 at 21:45

xKobalt · Accepted Answer · 2020-09-09 15:51:47Z

Ok, I made a few adjustment to your code, but it should work now.

<!DOCTYPE HTML> <html dark= "true" style="font-size: 50px;font-family: Roboto, Arial, sans-serif"> <body> <textarea id="copytext">ROGER</textarea> <div class="button" id="adadad"> <button onclick="copyS()" id="dlld">Copy text</button> </div> <p> </p> <!-- removed the single " at the end of your script tag --> <script type=text/javascript> //added () after you declared your function function copyS(){ clicked = document.getElementById("dlld"); //added .id to clicked. Not sure why you need to do this, but it works now if ("dlld" == clicked.id){ var am1 = document.getElementById("copytext"); //you need to select before running the .execCommand am1.select(); document.execCommand("copy"); } } </script> <p> </p> </body> </html>

Thank you so much, i realized the if wasn't necessary after i posted the question aswell. It worked perfectly, have a good day!

sbgib · Accepted Answer · 2020-04-03 21:15:45Z

It seems you need to select() the text from the textarea first. Try changing your function to:

function copyS{ var clicked = document.getElementById("dlld"); //if ("dlld" == clicked){ //Not sure you need this var am1 = document.getElementById("copytext"); am1.select(); document.execCommand("copy"); //} }

Hope that helps!

Saadi Toumi Fouad · Accepted Answer · 2020-04-03 21:27:23Z

I have changed your code to do the work.

var copiedText = ""; document.querySelector("button").onclick = function(e) { copiedText = e.target.previousElementSibling.value; document.execCommand("copy"); } document.body.oncopy = function(e) { event.clipboardData.setData('text/plain', copiedText); event.preventDefault(); };

body { font-size: 50px; font-family: Roboto, Arial, sans-serif; }

<textarea>ROGER</textarea> <button>Copy</button>

mainak · Accepted Answer · 2020-04-03 21:14:41Z

try this

(<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>) (<script> function copyToClipboard(text) { window.prompt("Copy to clipboard: Ctrl+C, Enter", text); } </script>)

Collectives™ on Stack Overflow

Can't manage to copy text to clipboard in Javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related