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

Question

我需要一些关于复制到剪贴板按钮的帮助。我似乎无法让它工作。现在它复制了完整的 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>

所以简单的答案是将 .html 替换为 .text。我对此还是很陌生。感谢您的帮助。

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>

Answer 2

在按钮中调用该函数 copyToClipboard('#p1')。比那个函数添加

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

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

body {
              background-color:#999999;
              font-family: 'Oswald', sans-serif;
      }
p
{
  color:#000000;
  font-size:20px;
}

.textBox
{
  height:30px;
  width:300px;
}

button
{
  height:30px;
  width:150px;
  border-radius:8px;
  padding:10px;
  font-size:20px;
  font-family: 'Oswald', sans-serif;
  height:52px;
  cursor:pointer;
  background-color:wheat;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>How to copy TEXT to Clipboard on Button-Click</title>
  
  

  
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

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

        <p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>

<center>
<div id="p1">
 
  <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>
</div>
<p id="p2">Hi, I'm the 2nd TEXT</p><br/>

<button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
<button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>
  
<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" />
</center>
  
    

</body>
</html>

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

Copy to clipboard button does not work properly

html

javascript

clipboard

jquery

button