CODEWITHSUNDEEP
javascriptjquerycopyclipboardpaste
JoeG
JoeG

Reputation: 37

Using Javascript to copy multiple element's text values to the users clipboard

I'm having issues creating a function that allows someone to click different buttons and have the corresponding <p> tag be selected and then have the text within said <p> tag be copied to the clipboard to be pasted. 

<p class="copyableInput grey49" id="p7">#494949</p>
<button class="copyableInputButton" onclick="copyToClipboard(p7)">COPY #
</button>
<p class="copyableInput grey66" id="p8">#666666</p>
<button class="copyableInputButton" onclick="copyToClipboard(p8)">COPY #
</button>
<p class="copyableInput greycc" id="p9">#cccccc</p>
<button class="copyableInputButton" onclick="copyToClipboard(p9)">COPY #
</button>
<p class="copyableInput greyf9" id="p10"><span 
style="color:#494949">#f9f9f9</span></p>
<button class="copyableInputButton" onclick="copyToClipboard(p10)">COPY #
</button>

function copyToClipboard(target){
    var copy= document.getElementById(target);
    copy.select();
    document.execCommand("Copy");
  alert("Copied the text: " + copy.value);
}

https://jsfiddle.net/gchis66/xrtLfffh/1/

Let me know if I've forgotten something.

Upvotes: 1

Views: 5071

Answers (2)

BaldProgrammer
BaldProgrammer

Reputation: 122

This function works for more browsers.

See this JSFiddle

<p class="copyableInput grey49" id="p7">#494949</p>
<button class="copyableInputButton" onclick="copyToClipboard('p7')">COPY #</button>
<p class="copyableInput grey66" id="p8">#666666</p>
<button class="copyableInputButton" onclick="copyToClipboard('p8')">COPY #</button>
<p class="copyableInput greycc" id="p9">#cccccc</p>
<button class="copyableInputButton" onclick="copyToClipboard('p9')">COPY #</button>
<p class="copyableInput greyf9" id="p10"><span style="color:#494949">#f9f9f9</span></p>
<button class="copyableInputButton" onclick="copyToClipboard('p10')">COPY #</button>



function copyToClipboard(target) {
  var element = document.getElementById(target);
  var text = element.innerHTML;
  CopyToClipboard(text);
  alert("Copied the text");
}



function CopyToClipboard (text) {
    // Copies a string to the clipboard. Must be called from within an 
    // event handler such as click. May return false if it failed, but
    // this is not always possible. Browser support for Chrome 43+, 
    // Firefox 42+, Safari 10+, Edge and IE 10+.
    // IE: The clipboard feature may be disabled by an administrator. By
    // default a prompt is shown the first time the clipboard is 
    // used (per session).
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

  } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
    var textarea = document.createElement("textarea");
    textarea.textContent = text;
    textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
    document.body.appendChild(textarea);
    textarea.select();

    try {
      return document.execCommand("copy");  // Security exception may be thrown by some browsers.
    } catch (ex) {
      console.warn("Copy to clipboard failed.", ex);
      return false;
    } finally {
      document.body.removeChild(textarea);
    }
    }
}

Upvotes: 1

Saturnin
Saturnin

Reputation: 36

When you click on the button, the function gets the paragraph tag : 

<p id="p9" class="copyableInput greycc">

so you just have to check its content like this :

var copy = target.innerHTML

Upvotes: 1

Related Questions