实现点击按钮复制特定行内容到剪贴板的教程-php教程-PHP中文网

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

DDD

发布： 2025-09-25 17:31:00

原创

573人浏览过

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

在动态生成的内容中，实现点击按钮复制特定行内容到剪贴板的功能，关键在于确保每个按钮和其对应的文本元素都有唯一的标识符。当使用循环生成多个包含复制功能的行时，如果所有按钮都指向同一个 ID，点击任何按钮都只会复制第一个元素的内容。以下将详细介绍如何通过 PHP 生成唯一的 ID，并修改 JavaScript 代码以实现正确的功能。

为每个元素生成唯一 ID

在使用循环生成内容时，可以通过一个计数器变量来为每个元素生成唯一的 ID。首先，在循环外部初始化计数器：

<?php
$i = 0;
?>

登录后复制

然后在循环内部，将计数器变量嵌入到 HTML 元素的 ID 中：

<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++;
?>

登录后复制

这样，每次循环都会生成一个不同的 ID，例如 demo0、demo1、demo2 等，确保每个段落和按钮都有唯一的标识。

京点点

京东AIGC内容生成平台

查看详情

修改 JavaScript 函数

原来的 JavaScript 函数 copy 接收一个元素 ID 作为参数，并尝试复制该元素的内容。现在，由于每个元素都有唯一的 ID，我们需要确保函数能够正确地选择对应的元素。

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);
}

登录后复制

这个函数通过 document.getElementById(element_id) 来获取指定 ID 的元素，并将其内容复制到剪贴板。由于每个元素现在都有唯一的 ID，因此函数能够正确地复制对应行的内容。

完整示例代码

下面是一个完整的示例代码，展示了如何使用 PHP 生成唯一的 ID，并结合 JavaScript 函数实现点击按钮复制特定行内容的功能：

<?php
$numresults = 5; // 假设有 5 行数据
$SearchFor = "example"; // 假设搜索关键词是 example
$info = [];
for ($i = 0; $i < $numresults; $i++) {
    $info[$i]['samaccountname'][0] = "user" . $i;
    $info[$i]['displayname'][0] = "User " . $i;
    $info[$i]['homedirectory'][0] = "/home/user" . $i;
}

echo "<div style='position: fixed; float: right; padding-left: 450px;'><a class=clear href=javascript:history.go(-1)>Search again</a></div>";
echo "<div><p>There are <b>$numresults</b> results for your search '<i><b>$SearchFor</i></b>'";
if ($numresults > 0) {
    echo " these are:</p></div>";
    echo "<div>";

    $i = 0;
    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++;
    }

    echo "</div>";
}
?>

<script>
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);
}
</script>

登录后复制