Question

我正在尝试使用javascript从p标签复制所有内容。它有效，但它将文本复制到一行长的文本中。我希望它使用break标签复制格式，就像有人使用鼠标复制/粘贴一样：

当前时间::

找到时间::

环境温度：°C

注意：

频率：

重现？“

非常感谢您的帮助。

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>title</title>
      </head>
      <body> 
      <h2>Documentation Sheet</h2>

     <p id="p1">
     Current Time: :<br>
     Time Found: :<br>
     Ambient Temp: °C<br>
     <br>
     <br>
     Notes:
     <br>
     <br>
     Frequency:<br>
    Reproducible? 
     </p>

      <button onclick="copyToClipboard('#p1')">Copy text</button>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      </body>

      <script>

      function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
      </script>
    </html>ere

Answer 1

可以编写一个函数来执行此操作：

function copyToClipboard(id) {
        var from = document.getElementById(id);
        var range = document.createRange();
        window.getSelection().removeAllRanges();
        range.selectNode(from);
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
 }

注意：我的解决方案不需要jQuery，并将文档ID作为输入，所以不要忘记省略“＃”！

只需使用如下：

 <button onClick="copyToClipboard('p1')">Copy text</button>

Answer 2

我不认为有一种快速简便的方法可以做你想做的事。您必须使用html()代替text()来提取<p>代码的内容，但是您需要做一些工作才能处理HTML你会回来 - 剥离应该被忽略的标签，转换实体，将内部<p>和<br>转换成换行符等等。

所以你要改变这一行：

$temp.val(parseHtml($(element).html())).select();

然后将遵循定义parseHtml()函数的更难的工作。

Javascript将带有html格式的<p>标签复制到clipbord

2 个答案: