Copy to clipboard with click JS

Question

I know there other similar examples out there surrounding this question. But none quite like this.

I am attempting to copy the input's value to the user's clipboard with JS and jQuery using execCommand but suspect I am misusing it. Any direction would be much appreciated.

Here is my html:

<div class="2 columns">
    <div class="js swatch container">
        <div class="js swatch color chartreuse"></div>
        <div class="swatch information">
            <span class="swatch title">Chartreuse</span>
            <input class="js swatch data" type="text" value="#31bc06" readonly>
        </div>
    </div>
</div>

And here is my JS:

// .js.swatch.container
var swatchContainer = $('.js.swatch.container');
var swatchData = $('.js.swatch.data');
swatchContainer.mouseenter(function() {
    $(this).children().children(swatchData).select();
});
swatchContainer.mouseleave(function() {
    $(this).children().children(swatchData).blur();
});
// test
swatchContainer.click(function() {
    $(this).children().children(swatchData).execCommand('copy');
});

Thanks in advance.

Do look here developers.google.com/web/updates/2015/04/cut-and-copy-commands — Stuart
– Stuart, Commented Jan 19, 2017 at 13:39
I think you need to select() first as in stackoverflow.com/questions/400212/… — GôTô
– GôTô, Commented Jan 19, 2017 at 13:42
Possible duplicate of How do I copy to the clipboard in JavaScript? — GôTô
– GôTô, Commented Jan 19, 2017 at 13:42

Justinas · Accepted Answer · 2017-01-19 13:41:30Z

1

You need to select text to temporary location and than call .execCommand('copy'). I have this code that works for me:

$(document).on('click', '.js.swatch.container', function () {
    var $temp = $("<textarea>");
    $("body").append($temp);
    $temp.val($(this).text()).select();
    var coppied = document.execCommand("copy");
    $temp.remove();
});

answered Jan 19, 2017 at 13:41

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Copy to clipboard with click JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related