CODEWITHSUNDEEP
javascripthtmlcss
Mebarek Zouakh
Mebarek Zouakh

Reputation: 109

click to copy element's html code


So what i'm trying to do basically is to create my own Bootstrap Cheat Sheet that would allow me to automatically copy and element's html code to the clipboard when I click on it or on a certain button.
A little bit like this site is doing : https://hackerthemes.com/bootstrap-cheatsheet/
I know how to copy text but how to get access to the actual html code and copy it that i don't know how.
This is the code 'm using to copy text :

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
  function myFunction() {
    var copyText = document.getElementById("myInput");
    copyText.select();
    document.execCommand("Copy");
    alert("Copied the text: " + copyText.value);
  }
</script>

would really appreciate some help ^^

Upvotes: 2

Views: 11217

Answers (4)

user7148391
user7148391

Reputation:

You can't Perform a Copy/Cut commands, on the document's elements.

document.execCommand("Copy"); only gets you an input value that you called select(); on, so i suggest you do the following :

function myFunction() {
    var copyinput = document.createElement('input');
    copyinput.value = document.getElementById("myInput").outerHTML;
    copyinput.select();
    document.execCommand("Copy");
    alert("Copied the text: " + copyinput.value);
  }
<input type="text" id="myInput">
<button onclick="myFunction()">Copy Code</button>

Upvotes: 1

Random Channel
Random Channel

Reputation: 1164

To access and change the words inside a div, or any element really, it is .innerHTML of an element.

function myFunction() {
  var button = document.getElementById("Button");
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
  button.innerHTML = "Copied!";
}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()" id="Button">Copy text</button>

This is just a quick example to show that .innerHTML can change the text on the inside of the button. If you are more of a jQuery person (Which I am), you could use the function .appendTo(), which is just the same thing, but in jQuery. I wouldn't recommend that to you since there is already a built-in function for doing that in js.

Now to copy whatever the code is,

function myFunction() {
  var text = document.getElementById("myInput");
  var copyText = document.getElementById('myInput').outerHTML;
  var textbox = document.getElementById('html');
  textbox.value = copyText;
  var button = document.getElementById("Button");
  textbox.select();
  document.execCommand("Copy");
  alert("Copied the text: " + text.value + " HTML code!");
  button.innerHTML = "Copied!";
}
#html {
  visibility: hidden;
}
<input type="text" value="Hello World" id="myInput">

<button onclick="myFunction()" id="Button">Copy text</button>
<input type="text" value="" id="html">

Now this second code takes the source code and copies that.

Upvotes: 1

Kyle B
Kyle B

Reputation: 2889

To get the text of the outerHtml copied, you need to take that and put it into a textbox so that you can select it, then copy it. It's a pretty hacky way to do this, but if you want to do it like hackerthemes, you can put the HTML into a disabled, selectable textbox that is styled nicely with CSS.

<html>
  <head>
 
    <script>
      function myFunction() {
        // get the OUTER html of the element you want to copy
        var text = document.getElementById('myInput').outerHTML;

        // put that outerHTML into another textbox for copying
        var tempTextbox = document.getElementById('copyingText');
        tempTextbox.value = text;

        tempTextbox.focus();
        tempTextbox.select();
        
        document.execCommand("Copy");
      }
    </script>
    
  </head>
  <body>
    <input type="text" id="copyingText" />
    <input type="text" value="Copy Test" id="myInput" />
    <button onclick="myFunction()">Copy text</button>
    
  </body>
</html>

Upvotes: 1

Rence
Rence

Reputation: 2950

Use outerHTML to get the html as string.

function myFunction() {

   //getting the html
   var copyText = document.getElementById("myInput").outerHTML;

   copyText.select();
   document.execCommand("Copy");

   //remove value
   alert("Copied the text: " + copyText);
}

Upvotes: 0

Related Questions