Question

我需要一些关于copytoclipboard按钮的帮助。我似乎无法让它发挥作用。现在它复制完整的div，但我只希望它复制里面的文本，包括段落之间的中断。我想我需要保留段落

编码设置，因为我在其他地方有按钮可以改变内部html。下面是HTML和JS。

非常感谢。巴特

function copyToClipboard(element) {
  var $temp = $("<textarea>");
  var brRegex = /<br\s*[\/]?>/gi;
  $("body").append($temp);
  $temp.val($(element).text().replace(brRegex, "\r\n")).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="report">

  <p style="font-size:125%" ;><b>Report: </b></p>
  <br>
  <p>Report 1.</p>
  <p id="1">entry 1: </p>
  <p id="2">entry 2: </p>
  <p id="3">entry 3: </p>
  <p id="4">entry 4: </p>
  <p id="5">entry 5: </p>
  <p id="6">entry 6: </p>
  <br>
  <p>Concluding: </p>
  <br><br>
  <p class="name"></p>
</div>

<div class="button01">
  <button type="button" onclick="copyToClipboard('div#report')">
      Copy div to clipboard
  </button>
</div>

所以简单的答案是用.text替换.html。我还是很陌生。谢谢你的帮助。

Answer 1

尝试使用$(element).text()代替$(element).html()

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="report">

  <p style="font-size:125%" ;><b>Report: </b></p>
  <br>
  <p>Report 1.</p>
  <p id="1">entry 1: </p>
  <p id="2">entry 2: </p>
  <p id="3">entry 3: </p>
  <p id="4">entry 4: </p>
  <p id="5">entry 5: </p>
  <p id="6">entry 6: </p>
  <br>
  <p>Concluding: </p>
  <br><br>
  <p class="name"></p>
</div>

<div class="button01">
  <button type="button" onclick="copyToClipboard('div#report')">
      Copy div to clipboard
  </button>
</div>

复制到剪贴板按钮无法正常工作

1 个答案: