Creating a Javascript function to copy any given text to the clipboard

Copying text to the user's clipboard can be very useful in certain situations such as allowing them to quickly copy long strings of text such as code or URLs.

The built-in function

document.execCommand

gives us the ability to copy text to the user's clipboard using the "copy" command. However, this command uses the selected text from a content editable container and not a text argument, meaning there is no way to directly copy dynamic text values using the command, but there is a way to get around it by creating temporary content editable elements.

Using document.execCommand( "copy" ) to copy content from a content editable element

The "copy" command is usually used to copy selected text from a content editable element to the clipboard, so it is a good starting point for learning how this command is used. If you are already familiar with this command then you can skip to the next section.

Firstly, you should set up a content editable element such as a <textarea> or <input> element, or you can create one by setting the contenteditable attribute of a text compatible element such as a <div> to true.

// valid content editable elements  
  
<textarea></textarea>  
<input>  
<div contentEditable></div>  

Now you can use document.execCommand( "copy" ) to copy any selected text from one of these elements.

For example, say we had a <textarea> element with the following text and selection:

Along with a button that will call the "copy" function that we will create now.

<textarea id="main_txa">Hello world</textarea>  
<button onclick="copy()">Copy selection</button>

Then we could use the following Javascript code to copy the selected text "world" to the user's clipboard:

function copy(){  
    // fix Firefox losing focus when button is clicked  
    document.getElementById( "main_txa" ).focus();  
      
    // catch any unforeseen errors  
    try{  
        var success = document.execCommand( "copy" );  
        // output whether or not copy was successful  
        success ? alert( "copy successful" ) : alert( "copy unsuccessful" );  
    }  
    catch( e ){  
        alert( "An error has occurred" );  
    }  
}  

This will copy the text "world" to the user's clipboard. As the document.execCommand function or some of its individual commands are not compatible with a lot of browser versions, you shouldn't forget to check by surrounding the function in a try-catch statement as well as checking whether or not it returns true (indicating specific command is compatible with the current browser).

For Firefox browsers you should also re-focus the content editable element as it loses its focus when the button is clicked.

Copying dynamically created text with document.execCommand( "copy" ) using a temporary element

By creating a temporary content editable element and adding it to the document, we can copy the required text into that element and add it to the user's clipboard using document.execCommand( "copy" ), then removing the element when we're finished.

This handy work-around will allow you to copy any text you want to the user's clipboard, not just what the user selects within a text area. Just watch out for browser compatibility, especially with Firefox and Internet Explorer.

Step 1 - Creating a temporary content editable element with the required text:

You can create a new <textarea> element using document.createElement and add the required text using the innerHTML property:

var node = document.createElement( "textarea" ); 
node.innerHTML = "Your text here";

Step 2 - Adding the element to your document and selecting it:

Using the appendChild() method, you can add the element we created to your document body, then with the select() method you can select the text within that element:

document.body.appendChild( node ); 
node.select();

Step 3 - Copying the text using document.execCommand( "copy" ) and removing the element when completed:

Now you can simply copy the text into the user's clipboard just like how you would copy selected text using document.execCommand( "copy" ), don't forget to remove the temporary element after the text has copied:

try{ 
    var success = document.execCommand( "copy" ); 
    success ? console.log( "copy successful" ) : console.log( "copy unsuccessful" ); 
} 
catch( e ){ 
    console.log( "browser not compatible" ); 
} 
document.body.removeChild( node );

We'll replace the alert() function with console.log() here, as the user will be able to see the temporary element while the script has paused due to the alert() function.

Putting it all together:

Now you can create a function that you can use for any of your projects that takes a text argument and copies it to the user's clipboard:

function copy( text ){  
    var node = document.createElement( "textarea" ); 
    node.innerHTML = "Your text here";  
    document.body.appendChild( node ); 
    node.select();  
  
    try{ 
        var success = document.execCommand( "copy" ); 
        success ? console.log( "copy successful" ) : console.log( "copy unsuccessful" ); 
    } 
    catch( e ){ 
        console.log( "browser not compatible" ); 
    } 
    document.body.removeChild( node );  
}