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>
|
Output:
How to copy the text to the clipboard in JavaScript?