JavaScript副本 <p> 用html格式標記到clipbord

Question

我正在嘗試使用javascript從ap標簽復制所有內容。 它可以工作，但是它會將文本復制到一長行文本中。 我希望它使用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()工作來定義parseHtml()函數。

JavaScript副本 <p> 用html格式標記到clipbord

問題描述

2 個解決方案

解決方案1
2 已采納 2018-03-13 02:13:11

解決方案2
0 2018-03-13 02:14:11

JavaScript副本 <p> 用html格式標記到clipbord

問題描述

2 個解決方案

解決方案1 2 已采納 2018-03-13 02:13:11

解決方案2 0 2018-03-13 02:14:11

解決方案1
2 已采納 2018-03-13 02:13:11

解決方案2
0 2018-03-13 02:14:11