1

How do I actually copy some fixed text to clipboard using javascript?

This is my code and it's not working maybe there's another way and I don't know.

<button onclick="Copy()">Copy</button>
<script>
function Copy() {
document.execCommand("copy","Some text here");
}    
</script>

I want to copy some fixed text using just button, so I don't have to select texts manually and copy them. Thanks.

Dokksen
  • 274
  • 3
  • 16
Khian Victory D Calderon
  • 11
  • 2
  • What text are you trying to copy? Please see how to create a [minimal,reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) so we can see the problem you are having and be able to help. – FluffyKitten Aug 26 '20 at 15:00
  • @FluffyKitten I believe there is a minimal example above. `"Some text here"` is not being copied to the clipboard as expected. – Jeremy Thille Aug 26 '20 at 15:01
  • @JeremyThille You're right, I had thought they were trying to copy text from another element. – FluffyKitten Aug 26 '20 at 15:05
  • I was trying to copy some text that are hidden from a user's input and interface so i do not have to select them manually thanks. – Khian Victory D Calderon Aug 27 '20 at 05:57

3 Answers3

2

try it:

var copy_text_val = document.querySelector('.copy_text');

function Copy() {
  copy_text_val.select();
  document.execCommand("copy");
  console.log(copy_text_val.value);
} 
<button onclick="Copy()">Copy</button>
<input type="text" class="copy_text" value="blablabla">
s.kuznetsov
  • 13,325
  • 3
  • 8
  • 21
0

You can try this approach:

<script>
    function Copy() {
     var copyText = document.createElement("input");                  
     copyText.style="display:none";
     copyText.value  = "This is a paragraph";     
     document.body.appendChild(copyText); 
     copyText.select();
     copyText.setSelectionRange(0, 99999); /*For mobile devices*/
     document.execCommand("copy");
     alert("Copied the text: " + copyText.value);
   }
</script>
D A
  • 467
  • 5
0

For this action you have to select the text dynamically before actually copying it: Here is an example:

function copy_text(node){
    if(document.body.createTextRange){
        const range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
        document.execCommand('copy');
    }
    else if(window.getSelection){
        const selection = window.getSelection();
        const range = document.createRange();
        range.selectNodeContents(node);
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('copy');
    }
    else {
        console.warn("Could not select text in node");
    }
}
// This copy_text function ensures cross-browser compatibility
// What it does is select the text within the range of the node holding the text
// Then executes the "copy" command on that selected text

function clear_selection(){
    if(window.getSelection){
        window.getSelection().removeAllRanges();
    }
    else if(document.selection){
        document.selection.empty();
    }
}
// This clear_selection function clears any selection from the document

document.addEventListener("DOMContentLoaded", function(){
    document.getElementById("clipboard-exec").onclick = function(){
        copy_text(document.getElementById("clipboard-text"));
        // Copy the text on clicking the button
        setTimeout(() => { clear_selection() }, 500);
        // Clear the selection after 0.5s
    }
});
<span id="clipboard-text">This is the text that will be copied to your clipboard when you click on the "Copy" button.</span>
<button><span id="clipboard-exec"><i class="fa fa-copy"> Copy</i></span></button>

Of course with this function you can just restructure it to fit your needs. Also note that what you are trying to accomplish by copying directly to the keyboard without a valid text node actually holding the text won't work, I guess for security purposes

But you can create a node in the document with the text but hide it from view then select it using this function .. NOTE the text you are copying to the clipboard has to be actually in the document, for you to execute the "copy" command on it

Cypherjac
  • 373
  • 3
  • 11