我如何将文本复制到剪贴板 - 跨浏览器

Question

好吧，感觉我已经陷入了如何将文本复制到剪贴板的困境，并尝试了很多建议

对于 chrome 来说似乎很容易做到这一点，但该选项在其他浏览器中不起作用

我有几个要求

我想将文本复制到剪贴板
能够复制包含多个元素的 html 的一部分
在 safari 中工作并且 chrome 至少
原版 Javascript

我找到了这个解决方案，除了它还复制了 html 标签外，它还有效吗？

我尝试将按钮上的 .innerHTML 更改为 .value，但结果未定义


<div id="something">
  <div>first name: <span class="name">name</span></div>
  <div>Job title: <span class="job">job</span></div>
    <div>Phone number: <a href="0123456789" class="number">0123456789</a></div>
  <img class="companylogo" src="./img/example.jpg">
</div>


<button onclick="copyToClipboard(document.getElementById('something').innerHTML)">
  Copy the stuff
</button>


<script>

    /* copy function */
function copyToClipboard(textToCopy) {
  var textArea;

  function isOS() {
    //can use a better detection logic here
    return navigator.userAgent.match(/ipad|iphone/i);
  }

  function createTextArea(text) {
    textArea = document.createElement('textArea');
    textArea.readOnly = true;
    textArea.contentEditable = true;
    textArea.value = text;
    document.body.appendChild(textArea);
  }

  function selectText() {
    var range, selection;

    if (isOS()) {
      range = document.createRange();
      range.selectNodeContents(textArea);
      selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      textArea.setSelectionRange(0, 999999);
    } else {
      textArea.select();
    }
  }

  function copyTo() {
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }

  createTextArea(textToCopy);
  selectText();
  copyTo();
}

</script>

Answer 1

document.getElementById('something').innerHTML

将 #something 中的 html 代码发送到 copyToClipboard，您提到的这种行为是预期的。如果不是 html，您希望将什么复制到剪贴板？

Answer 2

感谢 Hosseind600 的帮助

但我设法找到了一些完全符合我的要求的代码。同时勾选我设定的要求

它目前是第二个答案，但得票最高

   <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>

我如何将文本复制到剪贴板 - 跨浏览器

How do i copy text to clipboard - cross browser

html

javascript

clipboard

copy