The ability to copy content is a handy tool to have when developing complex websites and programs. This eliminates the need for users to select text and then use the keyboard’s copy-and-paste functions in favor of a single click of a button or icon.
To copy an activation code, recovery key, code snippet, etc., this function is typically employed. An alert or on-screen text (which could be a modal) can be added to further notify the user that the text has been copied to their clipboard.
In this JavaScript tutorial, you will learn how to copy the text from an HTML element with a specific class using JavaScript.
How to Copy Text to the Clipboard with JavaScript
- First, you need to select the HTML element with the desired class using JavaScript. You can do this using the
document.querySelector
method. - Once you have selected the element, you can retrieve its text content using the
textContent
property. - To copy the text to the clipboard, you can use the Clipboard API or a combination of the
document.execCommand('copy')
method. The Clipboard API is a more modern and recommended approach.
Here’s an example of how you can copy the text from an element with a specific class:
HTML:
<html>
<head>
<!-- Your HTML content here -->
</head>
<body>
<div class="my-element">This is the text to copy.</div>
<button id="copyButton">Copy Text</button>
<script src=“script.js”></script></body>
</html>
JavaScript (script.js):
// Get a reference to the button and the element with the class "my-element"
const copyButton = document.getElementById("copyButton");
const elementToCopy = document.querySelector(".my-element");
// Add a click event listener to the buttoncopyButton.addEventListener(“click”, () => {
// Select the text content of the element
const textToCopy = elementToCopy.textContent;
// Create a temporary textarea element to copy the text to the clipboardconst textarea = document.createElement(“textarea”);
textarea.value = textToCopy;
// Append the textarea to the documentdocument.body.appendChild(textarea);
// Select the text within the textareatextarea.select();
// Copy the selected text to the clipboarddocument.execCommand(“copy”);
// Remove the temporary textareadocument.body.removeChild(textarea);
// Provide some visual feedback to the user (e.g., an alert)alert(“Text has been copied to the clipboard: “ + textToCopy);
});
In this example, we use a button with the ID “copyButton” to trigger the copying action when clicked. The text from the element with the class “my-element” is copied to the clipboard when the button is clicked. We use a temporary textarea element to facilitate the copying process.
Remember that modern web applications often use the Clipboard API for better security and compatibility. The document.execCommand('copy')
method is considered obsolete and may not work in some web environments. Using the Clipboard API is recommended when available.
How to Copy Multiple Texts with Multiple Buttons Using JavaScript
If you have multiple elements and multiple copy buttons, and you want each copy button to copy the text from its corresponding element, you can modify the JavaScript code to handle this scenario. Here’s how you can do it:
HTML:
<html>
<head>
<!-- Your HTML content here -->
</head>
<body>
<div class="my-element">This is the text from element 1.</div>
<button class="copyButton">Copy Text</button>
<div class=“my-element”>This is the text from element 2.</div><button class=“copyButton”>Copy Text</button>
<div class=“my-element”>This is the text from element 3.</div><button class=“copyButton”>Copy Text</button>
<script src=“script.js”></script></body>
</html>
JavaScript (script.js):
// Get references to all the copy buttons and elements with the class "my-element"
const copyButtons = document.querySelectorAll(".copyButton");
const elementsToCopy = document.querySelectorAll(".my-element");
// Add click event listeners to all the copy buttonscopyButtons.forEach((copyButton, index) => {
copyButton.addEventListener(“click”, () => {
// Get the corresponding element’s text content
const textToCopy = elementsToCopy[index].textContent;
// Create a temporary textarea element to copy the text to the clipboardconst textarea = document.createElement(“textarea”);
textarea.value = textToCopy;
// Append the textarea to the documentdocument.body.appendChild(textarea);
// Select the text within the textareatextarea.select();
// Copy the selected text to the clipboarddocument.execCommand(“copy”);
// Remove the temporary textareadocument.body.removeChild(textarea);
// Provide some visual feedback to the user (e.g., an alert)alert(“Text has been copied to the clipboard: “ + textToCopy);
});
});
In this code, we use querySelectorAll
to select all the copy buttons and elements with the specified classes. We then use a forEach
loop to add click event listeners to each copy button. Inside the click event listener for each button, we retrieve the text content of the corresponding element.
This way, each copy button will copy the text from the specific element associated with it.
See the Pen Copy text with JavaScript by hollands web (@hollands-web) on CodePen.
In this tutorial, you have learned how to copy text to the clipboard using JavaScript without installing any JavaScript library.
Have fun coding!