Jquery HTML Copy to clipboard

Question

In my code, I am trying to copy iframe code using copy to clipboard button but I am not satisfied with it because when I copy using button it copies < and > instead of < and > secondly it won't highlights the text area so is there any alternate solution to copy as HTML code thanks Here is my JSfiddle

Here is a sample copied text

&lt;iframe src='http://localhost/secvideo/cms/watch?v=30Rt9r' frameborder='0' style='overflow: hidden; position: absolute;' height='100%' width='100%'&gt;&lt;/iframe&gt;

and Here is my JS

function copyToClipboard(elementId) {
var aux = document.createElement("input");

// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
alert("Copied!");
}

Your JS fiddle is not doing as you're describing - doesnt copy at all. — jdmdevdotnet, Aug 07 '17 at 20:29
When you change function copyToClipboard(elementId) to window.copyToClipboard = function(elementId) it works as expected — ajc2000, Aug 07 '17 at 20:38
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) — Djordje Vujicic, Aug 07 '17 at 21:51

score 1 · Accepted Answer · answered Aug 07 '17 at 20:54

I think you are creating an element unnecessarily here. You already have a text area with the iframe content.

All you need is to select the text area and do a document.execCommand("copy");

Modify your script to

window.copyToClipboard = function(elementId) {

  // Create a "hidden" input
  var aux = document.getElementById(elementId);
  // Highlight its content
  aux.select();
  // Copy the highlighted text
  document.execCommand("copy");
  alert("Copied!");
}

jsfiddle https://jsfiddle.net/yhpe990k/1/

score 1 · Answer 2 · answered Mar 19 '19 at 08:55

    var copyToClipboard = function (text) {
        var $txt = $('<textarea />');

        $txt.val(text)
            .css({ width: "1px", height: "1px" })
            .appendTo('body');

        $txt.select();

        if (document.execCommand('copy')) {
            $txt.remove();
        }
    };

Jquery HTML Copy to clipboard

2 Answers2