Question

我非常喜欢在我的网站上复制到剪贴板，这里是我感兴趣的例子。

(function() {

    "use strict";

    function copyToClipboard(elem) {

        var target = elem;

        // select the content
        var currentFocus = document.activeElement;

        target.focus();
        target.setSelectionRange(0, target.value.length);
        // copy the selection
        var succeed;

        try {
            succeed = document.execCommand("copy");
        } catch (e) {
            console.warn(e);
            succeed = false;
        }
        // Restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {
            currentFocus.focus();
        }

        if (succeed) {
            $(".copied").animate({
                top: -25,
                opacity: 0
            }, 700, function() {
                $(this).css({
                    top: 0,
                    opacity: 1
                });
            });
        }
        return succeed;
    }

    $("#copyButton, #copyTarget").on("click", function() {

        copyToClipboard(document.getElementById("copyTarget"));
    });
}());

以下是codepen https://codepen.io/LattyS/pen/QvGyKL

但我有2个问题

当我尝试制作多个链接时，如果我点击其中任何一个链接一起复制。
如何创建DIV

所以我需要同时制作10个以上的链接，如果有能力使用DIV复制到剪贴板或不使用同一个项目？像图片https://gulfupload.com/i/00025/fq8kg0ef7gw6.png中的这个 ...... 我很抱歉英语不好，但我希望你帮助我。谢谢先进

Answer 1

(function () {

    "use strict";

    function copyToClipboard(elem) {

        var target = elem;

        // select the content
        var currentFocus = document.activeElement;

        target.focus();
        target.setSelectionRange(0, target.value.length);

        // copy the selection
        var succeed;

        try {

            succeed = document.execCommand("copy");
        } catch (e) {

            console.warn(e);

            succeed = false;
        }

        // Restore original focus
        if (currentFocus && typeof currentFocus.focus === "function") {

            currentFocus.focus();
        }

        if (succeed) {

            $(target).closest('.input-group').find('.copied').animate({top: -25, opacity: 0}, 700, function () {

                $(this).css({top: 0, opacity: 1});
            });
        }

        return succeed;
    }


    $(".copyButton").on("click", function () {

        var parent = $(this).closest('.input-group');

        copyToClipboard(parent.find(".copyTarget")[0]);
    });
}());

Codepen链接，用于从多个链接一次复制单个链接：https://codepen.io/anon/pen/ELXWaG

如何为复制到剪贴板制作多重选择器或多重身份证

1 个答案: