How to copy the text to the clipboard in JavaScript ?

0 0 1 minute read

In order to copy the text to the clipboard in JavaScript we use document.execCommand() method. This can be done by following the below-mentioned approach.

Approach:

Get the text to be copied into an input box.
Use document.getElementById() method to capture the value.
Select the text field using element.select() method.
Copy the text using the document.execCommand(“copy”).
Access the text using the element.value() method.

The JavaScript code will look like this:

function GeeksForGeeks() {
    /* Get the text field */
    let copyGfGText = document.getElementById("IdOfTextToCopy");
    
    /* Select the text field */
    copyGfGText.select();
    
    /* Copy the text inside the text field */
    document.execCommand("copy");
        
    /* Use below command to access the 
       value of copied text */
    console.log(copyGfGText.value);
}

Note: The document.execCommand() method is not supported in IE8 and earlier.

Example: In this example, we will apply the above approach.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
 
    <title>
        How to copy the text to the
        clipboard in JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
    <input type="text" value="GeeksForGeeks"
        id="GfGInput">
 
    <button onclick="GeeksForGeeks()">
        Copy text
    </button>
 
    <p>
        Click on the button to copy the text 
        from the text field.<br> Try to paste 
        the text (e.g. ctrl+v) afterwards in
        a different window, to see the effect.
    </p>
 
    <p id="gfg"></p>
 
    <script>
        function GeeksForGeeks() {
            let copyGfGText = 
                document.getElementById("GfGInput");
 
            copyGfGText.select();
            document.execCommand("copy");
             
            document.getElementById("gfg")
                .innerHTML = "Copied the text: "
                + copyGfGText.value;
        }
    </script>
</body>
</html>