How to Copy Text to Clipboard in JavaScript

Whenever you are surfing the web, on many websites you see a button to copy a text, paragraph or code to the clipboard without even manually doing it. When you click the “copy to clipboard” button, the content is directly loaded into your system clipboard, which can be done using a few lines of JavaScript code.

In this tutorial, we will write the code for creating a front-end website with the option to copy the text to the clipboard only using HTML and JavaScript with step-by-step explanations, so let’s get started.

Also Read: String Interpolation in JavaScript

execCommand for Copy Text in a Browser

The execCommand function was used with the document object, it can be used to create copy-to-clipboard functionality. This function is supported in most browsers including Chrome, Firefox and Safari.

Syntax:

document.execCommand(command);

where command can be any command such as copy, cut, paste, bold, italic, etc., that is to be executed.

Note: Please note that this function is no longer recommended for copy text to the clipboard, as it has limited cross-browser support. For most stable document manipulation it is advisable to use the clipboard API.

Creating Copy to Clipboard Functionality in JavaScript

Let’s create a website having this copy-to-clipboard functionality.

Project Structure

The project structure is very simple, you just have to create a folder, and inside the folder, you must have two files, the index.html file for making the button to copy, with this button we have to link a JavaScript function, for which we will write code on a separate JavaScript file, index.js. You can write JavaScript code in the HTML file using a script tag without making a separate file, for simplicity.

Writing Code

Now, let’s write the code for index.html and index.js files.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Copy Text to Clipboard</title>
    <script src="index.js"></script>
</head>
<body>
    <!-- Input field to enter the text -->
    <input type="text" id="input" value="Text to be copied" />
    <!-- Button to trigger the copy function -->
    <button onclick="copyText()">Copy</button>
</body>
</html>

In the above code, we have a boilerplate code that has an input element with an id of “input”(you can use textarea for paragraph or long text), we also have a function “copyText()” attached to the button which will be executed when this button is clicked. This function handles copy-to-clipboard functionalities.

Below is the code snippet for creating the copy-to-clipboard functionalities.

index.js

function copyText() {
    /* Get the text field */
    var copyText = document.getElementById("input");
    /* Select the text field */
    copyText.select();
    /* Copy the text inside the text field */
    document.execCommand("copy");
    /* Alert the copied text */
    alert("Copied the text: " + copyText.value);
}

Don’t forget to link this file with HTML, if you haven’t then this functionality will not work.

Output:

You can now check the clipboard, it will contain the text you copied.

The application doesn’t look nice, because we haven’t used CSS, which you can use by wrapping the element in a div to enhance the look.

Summary

In this tutorial, we have learned to copy text to clipboard with JavaScript. We have implemented the JavaScript function execCommand() for creating this “copytoclipboard” functionality. You can also use the writeText() method of the navigator.clipboard API, which takes the text to be copied to the clipboard as an argument, this method is more modern and standardized, mainly recommended for production. Hope you have enjoyed reading the content.