实现点击按钮复制特定行内容到剪贴板

37次阅读

实现点击按钮复制特定行内容到剪贴板

本文旨在解决在使用循环生成多行内容时，点击复制按钮总是复制第一行的问题。通过为每个元素生成唯一的ID，并修改JavaScript函数以正确引用该ID，确保每个按钮都能复制其对应行的内容。本文提供详细的代码示例和步骤，帮助开发者实现此功能。

当需要在网页上实现一个“复制到剪贴板”的功能，并且数据是动态生成，例如通过循环从数据库中读取并展示时，可能会遇到点击按钮总是复制第一行数据的问题。这通常是因为所有按钮都指向了同一个ID的元素，导致JavaScript函数无法正确识别需要复制的目标行。以下是如何解决这个问题的详细步骤。

1. 生成唯一的ID

关键在于为每个需要复制的元素赋予唯一的ID。由于内容是通过循环生成的，我们可以利用循环计数器来动态生成ID。

在PHP循环开始之前，初始化一个计数器：

<?php $i = 0; ?>

然后在循环内部，使用这个计数器来生成唯一的ID：

<?php for ($x=0; $x<$numresults; $x++) {     $sam=$info[$x]['samaccountname'][0];     $disp=$info[$x]['displayname'][0];     $dir=$info[$x]['homedirectory'][0];     $fil=$info[$x]['homedirectory'] [0];     $displayout=substr($sam, 0, 4);      echo "User Name  : $sam";     echo "<br>Name          : $disp";     echo "<br>Home Drive : <a class=clear href=$dir>$dir</a><br>"; ?>     <p id="demo<?php echo $i; ?>">         <?php echo $dir ?>     </p>     <button onclick="copy('demo<?php echo $i; ?>')">Copy Keeping Format</button> <br><br> <?php     $i++; } ?>

在这个例子中，zuojiankuohaophpcnp> 元素的ID被动态生成为 demo0, demo1, demo2 等等，每个循环迭代都有一个唯一的ID。onclick 事件也相应地传递了正确的ID给 copy() 函数。

2. 修改 JavaScript 函数

确保 JavaScript 函数能够正确处理动态生成的ID。

京点点

京东AIGC内容生成平台

26

查看详情

function copy(element_id) {     var aux = document.createElement("div");     aux.setAttribute("contentEditable", true);     aux.innerHTML = document.getElementById(element_id).innerHTML;     aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");     document.body.appendChild(aux);     aux.focus();     document.execCommand("copy");     document.body.removeChild(aux); }

这个 copy() 函数接受一个 element_id 参数，并使用 document.getElementById(element_id) 来获取要复制的元素。由于我们现在为每个元素都生成了唯一的ID，所以这个函数可以正确地复制点击按钮对应的行的内容。

3. 另一种实现方式 (使用 input 元素)

如果需要复制的内容包含格式，或者需要更简洁的代码，可以使用 <input> 元素和 select() 方法。

HTML:

<?php for ($x=0; $x<$numresults; $x++) {     $sam=$info[$x]['samaccountname'][0];     $disp=$info[$x]['displayname'][0];     $dir=$info[$x]['homedirectory'][0];     $fil=$info[$x]['homedirectory'] [0];     $displayout=substr($sam, 0, 4);      echo "User Name  : $sam";     echo "<br>Name          : $disp";     echo "<br>Home Drive : <a class=clear href=$dir>$dir</a><br>"; ?>     <input type="text" value="<?php echo htmlspecialchars($dir); ?>" id="dir<?php echo $i; ?>">     <button onclick="copyTo(document.getElementById('dir<?php echo $i; ?>'))">Copy</button><br><br> <?php     $i++; } ?>  <script> function copyTo(input){     input.select();     document.execCommand("copy"); } </script>

在这个例子中，我们使用 <input type=”text”> 元素来显示要复制的内容，并为其设置唯一的ID。htmlspecialchars() 函数用于转义特殊字符，确保内容正确显示。copyTo() 函数使用 input.select() 方法选中输入框中的内容，然后使用 document.execCommand(“copy”) 将其复制到剪贴板。