-7

I want to make the "COPY ADDRESS" button copy a text I specify. I already tried to do it myself, but couldn't do it. It is very simple, I just have minimal knowledge.

http://porcelaincoins.com

 <a class="btn btn-lg" href="#">copy address</a>
porcelaincoins
  • 1
  • 2
  • 1
    Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – evolutionxbox Aug 01 '17 at 08:31
  • 1
    _"It is very simple"_ - I would recommend that, as you have little knowledge, try not to say sentences like this. It will be very likely that you are wrong. -- Trust me, I know. – evolutionxbox Aug 01 '17 at 08:32
  • @porcelaincoins What is your exact desired results? You want the users to copy text to clipboard or to a certain HTML element? Either way, I would say javascript will be a must. Making a button called copy will not do copying by itself. If you have minimal knowledge, consider it as a chance to learn more then. Dive yourself into w3school tutorial to learn more basic concepts. – tim1234 Aug 01 '17 at 08:39

1 Answers1

0

This code will copy the text abc to the clipboard.

function copy(text) {
  document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
  document.getElementById("copy").focus();
  document.execCommand("selectAll");
  document.execCommand("copy");
  document.getElementById("copy").remove();
}
<button onclick="copy('abc')">Copy</button>

How does it work?

  • Firstly, it makes a contenteditable div with the id of copy (don't use this ID anywhere else on your page). contenteditable elements are elements which are designed to be edited by the user, and there is extensive native JavaScript around them in the form of document.execCommand provided to help people make rich text editors. Part of document.execCommand is a copy method, to add text to the clipboard - however this only works reliably with selected text in a contenteditable element.
  • The next step is for the code to focus on the div. This is as if the user had clicked on it - inputs are known as focused when they are active - for example the focused element in a form will receive the keyboard events
  • The code then uses document.execCommand to select all of the text inside of the contenteditable div. In the first step, we ensured that this text was the text passed to the function.
  • Then, it copies that content to the clipboard using document.execCommand("copy"). This is actually surprisingly simple.
  • Finally, it removes the div from the DOM (i.e. destroys the div)

These actions should all happen so fast that the user will not realise that a div has even been created, however the text will appear on their clipboard.

Toastrackenigma
  • 5,350
  • 3
  • 35
  • 50
  • where should the function go? and how do I integrate your solution of the button to my existing one – porcelaincoins Aug 01 '17 at 09:37
  • @porcelaincoins Make a `` tag in-between the `` and `` tags of your webpage, and copy and paste the function in there. Then, just use `` whenever you need to copy something, replacing `abc` with what you want to copy – Toastrackenigma Aug 01 '17 at 11:11