Web Development

JavaScript Tutorial #1 : Copy the text to clipboard using JavaScript

By Holland web More Posts

October 18, 2023 5 min read
Copy The Text to Clipboard Using
Find out more

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

  1. First, you need to select the HTML element with the desired class using JavaScript. You can do this using the document.querySelector method.
  2. Once you have selected the element, you can retrieve its text content using the textContent property.
  3. 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
<!DOCTYPE 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):

javascript
// 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 button
copyButton.addEventListener(“click”, () => {
// Select the text content of the element
const textToCopy = elementToCopy.textContent;// Create a temporary textarea element to copy the text to the clipboard
const textarea = document.createElement(“textarea”);
textarea.value = textToCopy;// Append the textarea to the document
document.body.appendChild(textarea);// Select the text within the textarea
textarea.select();// Copy the selected text to the clipboard
document.execCommand(“copy”);// Remove the temporary textarea
document.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
<!DOCTYPE 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):

javascript
// 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 buttons
copyButtons.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 clipboard
const textarea = document.createElement(“textarea”);
textarea.value = textToCopy;// Append the textarea to the document
document.body.appendChild(textarea);// Select the text within the textarea
textarea.select();// Copy the selected text to the clipboard
document.execCommand(“copy”);// Remove the temporary textarea
document.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.

In this tutorial, you have learned how to copy text to the clipboard using JavaScript without installing any JavaScript library.

Have fun coding!

Leave a Reply

Your email address will not be published. Required fields are marked *