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 https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — Barry Michael Doyle, Apr 03 '20 at 21:45

score 2 · Answer 1 · answered Apr 03 '20 at 21:15

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!

score 2 · Accepted Answer · edited Sep 09 '20 at 15:51

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! — Roger99, Apr 03 '20 at 21:28

score 2 · Answer 3 · answered Apr 03 '20 at 21:27

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>

score 0 · Answer 4 · answered Apr 03 '20 at 21:14

0

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>)

answered Apr 03 '20 at 21:14

mainak

1,886
2
9
19

Can't manage to copy text to clipboard in Javascript

4 Answers4