How to Copy to Clipboard text from and tags using Jquery and JS?

Question

The HTMLInputElement.select() method selects all the text in a element or in an element that includes a text field.

That means .select() does not work on the element other than input and textarea. In my case, I have some strings in code and pre that I would like user to click on copy button to copy the text inside but according to definition above that does not work.

$(document).ready(function() {
  $('code, pre').append('');

  $('code span.command-copy').click(function(e) {
    text = $(this).parent().select(); //.text();
    copiedText = $.trim(text);
    document.execCommand("copy");
  });


  $('pre span.command-copy').click(function(e) {
    text = $(this).parent().parent().select(); //.text();
    copiedText = $.trim(text);
    document.execCommand("copy");
  });
})

code,
pre {
  position: relative;
}

code,
pre {
  display: block;
  padding: 20px;
  background: #f2f2f2;
  color: #555755;
}

span.command-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: .6;
  font-size: 20px;
  color: #555755;
}

span.command-copy:hover {
  cursor: pointer;
}






  Steps to install pytest


  Step 1: Open the terminal and type in this command:



        pip install pytest 

Or you can upgrade your existing:
  


    
pip install --upgrade pytest

Is any way I can work around this? Thanks

user_13669048 · Answer

Here is how you can copy to clipboard your text on click event by adding some java-script to your existing code.

.select() will not work in your case because its ONLY selects the text but its does not copy it which in your case you need to click to copy and paste as well.

Few things added:

You need to create element in body and copy your text value into it
document.execCommand('copy'); will that value from the input
Once it copied successfully it will delete the input value from DOM

Run snippet below to see it working.

$(document).ready(function() {
  $('code, pre').append('');

  $('code span.command-copy').click(function(e) {
    var text = $(this).parent().text().trim(); //.text();
    var copyHex = document.createElement('input');
    copyHex.value = text
    document.body.appendChild(copyHex);
    copyHex.select();
    document.execCommand('copy');
    console.log(copyHex.value)
    document.body.removeChild(copyHex);
  });


  $('pre span.command-copy').click(function(e) {
    var text = $(this).parent().text().trim();
    var copyHex = document.createElement('input');
    copyHex.value = text
    document.body.appendChild(copyHex);
    copyHex.select();
    document.execCommand('copy');
    console.log(copyHex.value)
    document.body.removeChild(copyHex);
  });
})

code,
pre {
  position: relative;
}

code,
pre {
  display: block;
  padding: 20px;
  background: #f2f2f2;
  color: #555755;
}

span.command-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: .6;
  font-size: 20px;
  color: #555755;
}

span.command-copy:hover {
  cursor: pointer;
}






  Steps to install pytest


  Step 1: Open the terminal and type in this command:



        pip install pytest 

Or you can upgrade your existing:
  


    
pip install --upgrade pytest

How to Copy to Clipboard text from <code> and <pre> tags using Jquery and JS?

1 Answers