Jquery select() 和将文本复制到剪贴板不起作用

Question

我正在尝试将文本从 table 行复制到我的剪贴板，但是，它不起作用。当 selected 并显示时，我已经在控制台的行中记录了文本，但是 select() 和 document.execCommand('copy') 不适用于此。

这是table

    <table class="table table-two">
        <div class="copied-toast"></div>
     <tr>
       <td>Login</td>
       <td class="copy-me">2090862973</td>
      <td>
         <div class="text-copy"><img src="../images/icons/fi_copy.svg" /> copy</div>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Password</td>
      <td class="copy-me">XNFRNFN</td>
      <td>
       <div class="text-copy"><img src="../images/icons/fi_copy.svg" /> copy</div>
     </td>
     <td><img src="../images/icons/key.svg" /> Change</td>
    </tr>
 </table>

这是jquery

<script>
    $(function () {
        $(".copied-toast").hide();
        $(".text-copy").click(function () {
            $(this).closest("tr").find(".copy-me").select();
            document.execCommand('copy');
            $(".copied-toast").text("Copied!").show().fadeOut(1200);
        });
    });
</script>

Answer 1

这是工作示例。

$(function () {
    $(".copied-toast").hide();
    $(".text-copy").click(function () {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(this).closest("tr").find(".copy-me").text()).select();
        document.execCommand('copy');
        $(".copied-toast").text("Copied!").show().fadeOut(1200);
        $temp.remove();
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-two">
        <div class="copied-toast"></div>
     <tr>
       <td>Login</td>
       <td class="copy-me">2090862973</td>
      <td>
         <div class="text-copy"><img src="../images/icons/fi_copy.svg" /> copy</div>
      </td>
      <td></td>
    </tr>
    <tr>
      <td>Password</td>
      <td class="copy-me">XNFRNFN</td>
      <td>
       <div class="text-copy"><img src="../images/icons/fi_copy.svg" /> copy</div>
     </td>
     <td><img src="../images/icons/key.svg" /> Change</td>
    </tr>
 </table>

请尝试使用以下代码：

$(function () {
    $(".copied-toast").hide();
    $(".text-copy").click(function () {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(this).closest("tr").find(".copy-me").text()).select();
        document.execCommand('copy');
        $(".copied-toast").text("Copied!").show().fadeOut(1200);
        $temp.remove();
    });
});

Answer 2

我发现 document.execCommand() 现在已经过时了，所以我使用了 Clipboard API

$(function () {
    $(".copied-toast").hide();
    $(".text-copy").click(function () {
        var copiedtext = $(this).closest("tr").find(".copy-me").text();
        if (navigator.clipboard) {
            navigator.clipboard.writeText(copiedtext)
                .then(() => {
                    $(".copied-toast").text("Copied!").show().fadeOut(1200);
                })
                .catch((error) => {
                    $(".copied-toast").text("Not copied!").show().fadeOut(1200);
                });
        } else {
            $(".copied-toast").text("Not copied!").show().fadeOut(1200);
        }

    });
});

Jquery select() 和将文本复制到剪贴板不起作用

Jquery select() and copy text to clipboard is not working

clipboard

jquery

select

copy-paste

execcommand

这是table

这是jquery