document.execCommand("Copy") not copying

Question

I am using jquery to enable a user to click on a button to copy a discount code. For some reason, document.execCommand("Copy"); is not working at all. When I ctrl + v to paste, nothing has gottten copied over. Could someone please help me? Thank you!!

$(document).ready(function(){
$('#copyBtn').click(function(){

  console.log("loaded")
  var copyText = $('#discountCode');
  console.log($('#discountCode').text())
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.text());
})

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


	<p>Receive 20% discount on registration fees using the code: <strong><span id="discountCode">FKR2455EMSPN</span></strong></p>

	<p>
To register, you will be taken to the
SuperReturn website.
</p>
<p>
Click <button id="copyBtn">here </button> to copy our VIP code to your clipboard
</p>
<p>
Click <a href='#'>
here</a> to now be taken to the SuperReturn registration page.
</p>
</div>

Answer 1

For AngularJS

<!--The text field-->
<input type="text" value="Hello World" id="helloWorld">

<!--The button used to copy the text-->
<button onclick="copyText()">Copy text</button>


function copyText() {
   var text = document.getElementById("helloWorld");
   text.select();
   text.setSelectionRange(0, 99999);
   navigator.clipboard.writeText(text.value);
}

Answer 2

You're missing the range object.

I have broken the code for you below and commented it so you can see exactly what I do.

var text = $("#discountCode").get(0); // Grab the node of the element

var selection = window.getSelection(); // Get the Selection object

var range = document.createRange(); // Create a new range

range.selectNodeContents(text); // Select the content of the node from line 1

selection.removeAllRanges(); // Delete any old ranges

selection.addRange(range); // Add the range to selection

document.execCommand('copy'); // Execute the command

The reason why your code does not work is because it does not highlight the item you are wanting to copy, so you copy nothing and when you copy nothing the last value you copied is preserved.

Hope this helps.

$(document).ready(function(){
    $('#copyBtn').click(function(){

        var text = $("#discountCode").get(0)
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
        //add to clipboard.
        document.execCommand('copy');
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<p>
  Receive 20% discount on registration fees using the code: 
  <strong><span id="discountCode">FKR2455EMSPN</span></strong>
</p>

<p>
  To register, you will be taken to the
  SuperReturn website.
</p>

<p>
  Click <button id="copyBtn">here </button> to copy our VIP code to your clipboard
</p>

<p>
  Click <a href='#'>here</a> to now be taken to the SuperReturn registration page.
</p>

Answer 3

We add the email address in our HTML with a button to initiate the copying when it's clicked:

 <p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>
    <p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

Then in our JavaScript, we want to add a click event handler to our button in which we select the email address text from the js-emaillink anchor, execute a copy command so that the email address is in the user's clipboard and then we deselect the email address so the user doesn't see the selection occur.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Select the email link anchor text
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);

  try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch(err) {
    console.log('Oops, unable to copy');
  }

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported
  window.getSelection().removeAllRanges();
});

Ahead of calling document.execCommand(), you should ensure that this API is supported using the document.queryCommandSupported() method. In our example above we could set the button disabled state based on support like so:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');