Copy Text to clipboard using HTML button

user_14097465 0
Viewed 5856

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.

clipboard button html javascript
3 Answers

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

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

user_135734440

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

user_131170700
Related