单击 JS 复制到剪贴板

Question

我知道围绕这个问题还有其他类似的例子。但是none很喜欢这样。

我正在尝试使用 JS 和 jQuery 使用 execCommand 将输入的值复制到用户的剪贴板，但怀疑我误用了它。任何方向将不胜感激。

这是我的 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>

这是我的 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');
});

提前致谢。

Answer 1

您需要 select 发短信到临时位置然后打电话给 .execCommand('copy')。我有适合我的代码：

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

单击 JS 复制到剪贴板

Copy to clipboard with click JS

javascript

clipboard

jquery