Search code examples
javascriptjquery

How to copy text from a div to clipboard


Here is my code for when the user clicks on this button:

<button id="button1">Click to copy</button>

How do I copy the text inside this div?

<div id="div1">Text To Copy</div>

Solution

  • Both examples work like a charm :)

    1. JAVASCRIPT:

      function CopyToClipboard(containerid) {
        if (document.selection) {
          var range = document.body.createTextRange();
          range.moveToElementText(document.getElementById(containerid));
          range.select().createTextRange();
          document.execCommand("copy");
        } else if (window.getSelection) {
          var range = document.createRange();
          range.selectNode(document.getElementById(containerid));
          window.getSelection().addRange(range);
          document.execCommand("copy");
          alert("Text has been copied, now paste in the text-area")
        }
      }
      <button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
      <br /><br />
      <div id="div1">Text To Copy </div>
      <br />
      <textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

    2. JQUERY (relies on Adobe Flash): https://paulund.co.uk/jquery-copy-to-clipboard