I want to copy the parameters from on click function

Question

<button onclick="copyToClipboard('#2E5090')">Copy</button>


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

I want to copy that #2E5090 which i have passed through onclick function but i am unable to do

Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Farsad, Oct 31 '20 at 06:31
As the duplicate suggested - Change `var $temp = $("");` to `var $temp = $("textarea");` — Alon Eitan, Oct 31 '20 at 06:37
The question highlighted by @Farsad gives some interesting suggestions but, at 11 years old and with 56 answers some even going back to Flash we probably ought to try to find an answer to put here which covers most browsers, hopefully including IE11, as of 2020. — A Haworth, Oct 31 '20 at 08:13

A Haworth · Answer 1 · 2020-10-31T13:07:12.813

NOTE: I put this up as a solution to the immediate question as asked but it comes with a health warning.

execCommand is apparently obsolete have I understood this right? see e.g. https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand which says it should not be used on new websites although according to https://caniuse.com/?search=execcommand almost all browsers support it as of October 2020.

A pure Javascript method:

    function copyToClipboard(text) { 
        var temp = document.createElement('INPUT');
        temp.style.position = 'fixed'; //hack to keep the input off-screen...
        temp.style.left = '-10000px'; //...but I'm not sure it's needed...
        document.body.appendChild(temp); 
        temp.value = text; 
        temp.select();
        document.execCommand("copy"); 
        //temp.remove(); //...as we remove it before reflow (??)
        document.body.removeChild(temp);//to accommodate IE
    }

    <button onclick="copyToClipboard('#2E5090')">Copy</button>

score 0 · Answer 2 · answered Oct 31 '20 at 07:29

0

You can use this code instead of that:

function CopyToClipboard(containerid) {
      if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(containerid));
        range.select().createTextRange();
        document.execCommand("copy");
      } else if (window.getSelection) {
        var range = document.createRange();
        range.selectNode(document.getElementById(containerid));
        window.getSelection().addRange(range);
        document.execCommand("copy");
        alert("Link Copied to ClipBoard");
      }
    }

answered Oct 31 '20 at 07:29

THUNDR

26
1

This is tackling a different question, how to copy text from a given element, not how to copy some given text. – A Haworth Oct 31 '20 at 08:15
...but has some good ideas on using ranges which could be adapted to answer the question as asked. – A Haworth Oct 31 '20 at 08:54

score 0 · Answer 3 · answered Oct 31 '20 at 13:06

Note: I put up an answer which took the code in the question and altered it just slightly but still used the execCommand in JavaScript but with a warning that this is now (October 2020) obsolete - though available still on many (most) browsers.

This is a more 'modern' way of doing things which falls back on execCommand if necessary. It seems quite complex as we have to check whether the browser's JS supports async and this is done by loading another js file.

Here is the code to put in a file called e.g. new-copy-to-clipboard.js:

async function newCopyToClipboard(text) {
      try {
      await navigator.clipboard.writeText(text);
      } catch (error) { // for when e.g. has been called using http not https
        fallbackCopyToClipboard(text);
      }

and here is the main js code:

<body>
<button onclick="copyToClipboard('#2E5090')">Copy</button>

<script>
// test whether the browser supports async function declaration or not
new Promise(function (resolve, reject) {
  let script = document.createElement('script');
  document.body.appendChild(script);
  script.onload = resolve.bind(null, true);
  script.onerror = reject;
  script.async = true;
  script.src = 'new-copy-to-clipboard.js';
})
.then(function () {
})
.catch();

function fallbackCopyToClipboard(text) {
    let temp = document.createElement('INPUT');
    temp.style.position = 'fixed'; //hack to keep the input off-screen...
    temp.style.left = '-10000px'; //...but I'm not sure it's needed...
    document.body.appendChild(temp); 
    temp.value = text; 
    temp.select();
    document.execCommand('copy');
    //temp.remove(); //...as we remove it before reflow (??)
    document.body.removeChild(temp);//to accommodate IE
}

function copyToClipboard(text) {
    if (typeof newCopyToClipboard === 'function') {
      newCopyToClipboard(text);
  }
  else {
      fallbackCopyToClipboard(text);
    }
}

</script>
</body>
    }

I want to copy the parameters from on click function

3 Answers3