Copy text string by click

Question

I spent 20 minutes searching the Internet, but could not find it. I want to be able to copy a text string when pressed without a button. The text string will be inside the span class.

• User hangs over text string
• User clicks a text string
• The text string is copied to the clipboard.

Any help would be greatly appreciated. Thanks!

Answer 1

You can attach the copy element to the <span> element, use document.execCommand("copy") in the event handler, set event.clipboardData to span .textContent using the .setData() event.clipboardData

 const span = document.querySelector("span"); span.onclick = function() { document.execCommand("copy"); } span.addEventListener("copy", function(event) { event.preventDefault(); if (event.clipboardData) { event.clipboardData.setData("text/plain", span.textContent); console.log(event.clipboardData.getData("text")) } }); 

 <span>text</span> 

Answer 2

Try it. document.execCommand('copy')

1. click an element, copy the text and place it using the tmp input element
2. Then copy the text from this entry

 function copy(that){ var inp =document.createElement('input'); document.body.appendChild(inp) inp.value =that.textContent inp.select(); document.execCommand('copy',false); inp.remove(); } 

 <p onclick="copy(this)">hello man</p> 

Answer 3

This is a pen code .

 <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

 <p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p> <center> <p id="p1">This is TEXT 1</p> <p id="p2">This is TEXT 2</p><br/> <button onclick="copyToClipboard('#p1')">Copy TEXT 1</button> <button onclick="copyToClipboard('#p2')">Copy TEXT 2</button> <br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" /> </center> 

Jquery code here

 function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } 

Answer 4

Along with copying text, you must also make sure that any previously selected component remains selected after copying to the clipboard.

Here is the complete code:

 const copyToClipboard = str => { const el = document.createElement('textarea'); // Create a <textarea> element el.value = str; // Set its value to the string that you want copied el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof el.style.position = 'absolute'; el.style.left = '-9999px'; // Move outside the screen to make it invisible document.body.appendChild(el); // Append the <textarea> element to the HTML document const selected = document.getSelection().rangeCount > 0 // Check if there is any content selected previously ? document.getSelection().getRangeAt(0) // Store selection if found : false; // Mark as false to know no selection existed before el.select(); // Select the <textarea> content document.execCommand('copy'); // Copy - only works as a result of a user action (eg click events) document.body.removeChild(el); // Remove the <textarea> element if (selected) { // If a selection existed before copying document.getSelection().removeAllRanges(); // Unselect everything on the HTML document document.getSelection().addRange(selected); // Restore the original selection } }; 

ps add source source

Answer 5

HTML:

 <button type='button' id='btn'>Copy</button> 

Js

 document.querySelect('#btn').addEventListener('click', function() { copyToClipboard('copy this text'); }); 

JS / Function:

 function copyToClipboard(text) { var selected = false; var el = document.createElement('textarea'); el.value = text; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); if (document.getSelection().rangeCount > 0) { selected = document.getSelection().getRangeAt(0) } el.select(); document.execCommand('copy'); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } }; 

Answer 6

guest271314 answer applies to multiple elements:

 spans = document.querySelectorAll(".class"); for (const span of spans) { span.onclick = function() { document.execCommand("copy"); } span.addEventListener("copy", function(event) { event.preventDefault(); if (event.clipboardData) { event.clipboardData.setData("text/plain", span.textContent); console.log(event.clipboardData.getData("text")) } }); } 

 <span class="class">text</span> <br> <span class="class">text2</span> 

Answer 7

 function copy(that){ var inp =document.createElement('input'); document.body.appendChild(inp) inp.value =that.textContent inp.select(); document.execCommand('copy',false); inp.remove(); } 

 <p onclick="copy(this)">hello man</p>