How to copy the text to the clipboard in JavaScript ?

Last Updated : 20 Dec, 2023

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

Syntax:

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);
}

Approach

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

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>