Question

所以我试图做的基本上就是创建我自己的Bootstrap Cheat Sheet，这样当我点击它或某个按钮时，我就可以自动复制和元素的html代码到剪贴板。 /> 有点像这个网站正在做：https://hackerthemes.com/bootstrap-cheatsheet/
我知道如何复制文本，但如何访问实际的HTML代码并复制它，我不知道如何。
这是用于复制文本的代码：

＆＃13;

<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>

＆＃13;

非常感谢一些帮助^^

Answer 1

使用df C object_id number date user_id change 1000001 1234 2017-01-01 ABC 6666661111 1000001 04447 2018-01-01 ABC 9999990000 1000002 <AAA>0000001 2018-02-02 DEF 3333339999 1000002 <AAA>0999999 2018-03-03 DEF 4444448888 1000003 980000 2018-04-05 DEF 5555550000 1000004 970000 2018-05-06 XYZ 3200000000 df A object_id name 1000001 company_a 1000001 company_a 1000002 company_b 1000002 company_b 1000003 company_c 1000004 company_d将html作为字符串。

outerHTML

Answer 2

要访问和更改div中的单词或任何元素，它是元素的.innerHTML。

＆＃13;

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!";
}

＆＃13;

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

＆＃13;

这只是一个快速示例，表明.innerHTML可以更改按钮内部的文本。如果你更像一个jQuery人（我就是这样），你可以使用函数.appendTo()，这是同样的事情，但在jQuery中。我不会向你推荐这个，因为在js中已经有了内置的功能。

现在复制代码是什么，

＆＃13;

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!";
}

＆＃13;

#html {
  visibility: hidden;
}

＆＃13;

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

＆＃13;

现在第二个代码获取源代码并复制它。

Answer 3

要复制outerHtml的文本，您需要将其复制并放入textbox，以便您可以选择它，然后复制它。这是一个很好的方法，但如果你想像hackerthemes那样做，你可以将HTML放入一个disabled，可选的textbox，用CSS很好地设计。

＆＃13;

<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>

＆＃13;

Answer 4

您无法在文档的元素上复制执行复制/剪切命令。

document.execCommand("Copy");只会为您提供一个名为select();的输入值，因此我建议您执行以下操作：

＆＃13;

function myFunction() {
    var copyinput = document.createElement('input');
    copyinput.value = document.getElementById("myInput").outerHTML;
    copyinput.select();
    document.execCommand("Copy");
    alert("Copied the text: " + copyinput.value);
  }

＆＃13;

<input type="text" id="myInput">
<button onclick="myFunction()">Copy Code</button>

＆＃13;

点击复制元素的HTML代码

4 个答案: