Copy to Clipboard- specific item

Question

How can I implement a button that copies the text displayed on to clipboard with a simple method? I'm having a mental block.

 <div className="detailholder">
                <div className="textArea">
                    <strong>www.testexample.com</strong>
                </div>
                <div >
                    <button className="iconHolder">
                    <i data-clipboard-text="www.testexample.com"></i>
                    <FiCopy />
                    <strong>Copy</strong>
                    </button>
                </div>
            </div>

What have you tried? Please see https://stackoverflow.com/help/how-to-ask. — isherwood, May 18 '21 at 12:58

score 0 · Answer 1 · answered May 18 '21 at 12:56

If you're happy with using JS then you can do this:

function copyText() {
  /* Get the text field */
  var copyText = document.getElementById("ID-OF-TEXT-TO-BE-COPIED");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile */

  /* Copy the text inside the text field */
  document.execCommand("copy");
}

Then for HTML:

<button onclick="copyText();"/>
<strong>Copy</strong>
</button>

Let me know if this help!

Copy to Clipboard- specific item

1 Answers1