Multiple copy buttons to copy content from div and textarea
When we write something on webpage, and want to let people copy easily with a "Copy" button, we need these codes to do that easily. Here are the codes for multiple copy buttons for multiple items, both div and textarea.
Copy button for one <div>
This is an example text to copy : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This sentence is Red. This sentence is bold. This sentence is underlined. This sentence is italic. This sentence is Strikethrough. Sem et tortor consequat id porta nibh venenatis cras.
- Rupnagar, Mirpur, Dhaka
- Chittagong
- 😎
- আমার মাতৃà¦াষা বাংলা
- Calcutta
This code is developed by Tawhidur Rahman Dear.
Now here is the code, copy the code with the button below
<div id="Item">
<p style="padding: 5px; text-align: justify;">This is an example text to copy : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color: red;">This sentence is Red. </span><strong>This sentence is bold</strong>. <span style="text-decoration: underline;">This sentence is underlined</span>. <em>This sentence is italic</em>. <span style="text-decoration: line-through;">This sentence is Strikethrough</span>. Sem et tortor consequat id porta nibh venenatis cras.</p>
<hr />
<ul>
<li style="padding: 5px; text-align: justify;">Rupnagar, Mirpur, Dhaka</li>
<li style="padding: 5px; text-align: justify;"><span style="background-color: yellow;">Chittagong</span></li>
<li style="padding: 5px; text-align: justify;">😎</li>
<li style="padding: 5px; text-align: justify;">আমার মাতৃà¦াষা বাংলা</li>
<li style="padding: 5px; text-align: justify;">Calcutta</li>
</ul>
<p style="padding: 5px; text-align: justify;">This code is developed by <a title="Tawhidur Rahman Dear" href="https://www.tawhidurrahmandear.com/" target="_blank" rel="noopener">Tawhidur Rahman Dear</a>.</p>
</div>
<p><button type="button" id="CopyButton">Copy Text</button></p>
<script>
// Copy button for div
// developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com
function copyWithFormatting(elementId, buttonId) {
const div = document.getElementById(elementId);
const button = document.getElementById(buttonId);
if (div) {
// Get the HTML content with styling
const htmlToCopy = div.outerHTML;
const plainText = div.innerText; // Fallback plain text
// Create ClipboardItem for rich text and plain text
const clipboardItem = new ClipboardItem({
'text/html': new Blob([htmlToCopy], { type: 'text/html' }),
'text/plain': new Blob([plainText], { type: 'text/plain' })
});
navigator.clipboard.write([clipboardItem]).then(() => {
// Success: Change button text to "Successfully copied"
button.textContent = 'Successfully copied!';
setTimeout(() => {
// Revert button text after 5 seconds
button.textContent = 'Copy again ...';
}, 5000);
}).catch(() => {
// Error: Show "Copy again ..." immediately
button.textContent = 'Copy again ...';
});
}
}
document.getElementById('CopyButton').addEventListener('click', () => {
copyWithFormatting('Item', 'CopyButton');
});
</script>
Multiple copy buttons for multiple <divs>
This is an example text to copy : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This sentence is Red. This sentence is bold. This sentence is underlined. This sentence is italic. This sentence is Strikethrough. Sem et tortor consequat id porta nibh venenatis cras.
- Rupnagar, Mirpur, Dhaka
- Chittagong
- 😎
- আমার মাতৃà¦াষা বাংলা
- Calcutta
This code is developed by Tawhidur Rahman Dear.
Another Text
With different type of formatting.
Now here is the code, copy the code with the button below
<div id="Item1">
<p style="padding: 5px; text-align: justify;">This is an example text to copy : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span style="color: red;">This sentence is Red. </span><strong>This sentence is bold</strong>. <span style="text-decoration: underline;">This sentence is underlined</span>. <em>This sentence is italic</em>. <span style="text-decoration: line-through;">This sentence is Strikethrough</span>. Sem et tortor consequat id porta nibh venenatis cras.</p>
<hr />
<ul>
<li style="padding: 5px; text-align: justify;">Rupnagar, Mirpur, Dhaka</li>
<li style="padding: 5px; text-align: justify;"><span style="background-color: yellow;">Chittagong</span></li>
<li style="padding: 5px; text-align: justify;">😎</li>
<li style="padding: 5px; text-align: justify;">আমার মাতৃà¦াষা বাংলা</li>
<li style="padding: 5px; text-align: justify;">Calcutta</li>
</ul>
<p style="padding: 5px; text-align: justify;">This code is developed by <a title="Tawhidur Rahman Dear" href="https://www.tawhidurrahmandear.com/" target="_blank" rel="noopener">Tawhidur Rahman Dear</a>.</p>
</div>
<p><button type="button" id="CopyButton1">Copy Text</button></p>
<br>
<div id="Item2" style="color: green; font-size: 14px;">
<p>Another Text</p>
<p>With different type of formatting.</p>
</div>
<p><button type="button" id="CopyButton2">Copy Text</button></p>
<script>
// Copy button for div
// developed by Tawhidur Rahman Dear, https://www.tawhidurrahmandear.com
function copyWithFormatting(elementId, buttonId) {
const div = document.getElementById(elementId);
const button = document.getElementById(buttonId);
if (div) {
// Get the HTML content with styling
const htmlToCopy = div.outerHTML;
const plainText = div.innerText; // Fallback plain text
// Create ClipboardItem for rich text and plain text
const clipboardItem = new ClipboardItem({
'text/html': new Blob([htmlToCopy], { type: 'text/html' }),
'text/plain': new Blob([plainText], { type: 'text/plain' })
});
navigator.clipboard.write([clipboardItem]).then(() => {
// Success: Change button text to "Successfully copied"
button.textContent = 'Successfully copied!';
setTimeout(() => {
// Revert button text after 5 seconds
button.textContent = 'Copy again ...';
}, 5000);
}).catch(() => {
// Error: Show "Copy again ..." immediately
button.textContent = 'Copy again ...';
});
}
}
document.getElementById('CopyButton1').addEventListener('click', () => {
copyWithFormatting('Item1', 'CopyButton1');
});
document.getElementById('CopyButton2').addEventListener('click', () => {
copyWithFormatting('Item2', 'CopyButton2');
});
</script>
Copy button for <textarea>
Although any text inside textarea is plain text. It's not possible to format. But to let you know the difference between div and textara, same example text is used here
Now here is the code, copy the code with the button below
Multiple copy buttons for multiple <textarea>
Now here is the code, copy the code with the button below