Copy to clipboard using jquery?

Question

I want to copy text to clipboard using jquery. But somewhere I am missing. I have the following codes:

<span class="copy-btn" data-type="attribute" data-attr-name="data-clipboard-text" data-model="couponCode" data-clipboard-text="<?php echo $result->coupon_code; ?>">COPY CODE</span>
                  </div>

And jquery is as follows:

$(document).ready(function(){
    $('.copy-btn').on("click", function(){
        value = $(this).data('clipboard-text'); //Upto this I am getting value
        var $temp = $("<input>");
          $("body").append($temp);
          $temp.val($(value).text()).select();
          document.execCommand("copy");
          $temp.remove();
    })
})

So please correct me, how can I copy code to clipboard. I am getting the value of the text, but after that I am unable to proceed.

Answer 1

For people looking for a simple function to copy text to clipboard

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

This can be called with jQuery like this:

$('#copyButtonId').click(function () { copyToClipboard("this text was copied"); });

Answer 2

var copyToClipboard = function (text) {
            var $txt = $('<textarea />');    
            $txt.val(text).css({ width: "1px", height: "1px" }).appendTo('body');
            $txt.select();    
            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };