In this tutorial, we will learn how to create a JavaScript function that allows users to copy text from a specific div element when it is clicked. This can be a useful feature for allowing users to easily copy text from a webpage without the need for additional input elements or buttons.
We will start by creating a function that captures the text inside the div element and copies it to the clipboard using a temporary textarea element. Next, we will create a "Copied" message element and display it within the div.
Copy Div Content on Click using JavaScript Example
JavaScript Code:
function copyTextOnClick(divId) { // Get the text that needs to be copied var text = document.getElementById(divId).innerText; // Create a temporary textarea element to copy the text var textArea = document.createElement("textarea"); const message = document.getElementById('msg'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); // Display a "Copied" message at the top right corner of the div message.style.display = 'block'; setTimeout(() => { message.style.display = 'none'; }, 2000); }
This JavaScript function, named copyTextOnClick
, takes a single parameter, divId
, which is the ID of the div element that you want to copy text from.
The function first gets the text inside the div element by using document.getElementById
to retrieve the div element and then accessing its innerText
property.
Next, the function creates a temporary textarea
element and sets its value
to the text that needs to be copied. The textarea
element is then added to the body of the webpage and selected. The document.execCommand("copy")
method is then used to copy the text in the textarea
element to the clipboard. The temporary textarea
element is then removed from the body of the webpage.
Finally, the function displays a "Copied" message element by setting its display
style to block
, and then hides the message element after 2 seconds by setting its display
style to none
.
HTML Code:
<div id="myDiv" onclick="copyTextOnClick('myDiv')"> Click here to copy this text <div id="msg">Copied...</div> </div>
CSS Code:
#myDiv { width: 700px; border: 1px solid #ddd; background-color: #f5f5f5; padding: 5px; height: 100px; cursor: pointer; } #msg { position: relative; float: right; color: #000; background-color: #fff; display: none; padding: 5px 10px; border-radius: 6px; }
You can check the live example on Codepen, if the below code does not run on your browser, due to the permissions issue, click on The "Edit on Codepen" to view it there:
See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.
Related:
- Textarea on Click Copy Text Using JavaScript
- How to Create Copy to Clipboard Button Using ClipboardJS?
- Adding Copy Button to All PRE Tags in a Page