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

user_9968694 0
Viewed 310

I am trying to copy text from table rows to my clipboard, however, it does not work. I have logged the text from the row in the console when it selected and it shows, however select() and document.execCommand('copy') is not working with this.

This is the 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>

This is the 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>
execcommand copy-paste clipboard select jquery
2 Answers

Here is working example.

$(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>

Please try to use following code:

$(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();
    });
});
Admin1

I've found that document.execCommand() is now obselete so I used the 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);
        }

    });
});
user_99686940
Related