Javascript - 从 sweetalert2 按钮复制确认

Question

单击“复制 URL”按钮时如何复制？

function cdwUrlsMDBE() {
            var prd = document.getElementById("prd");

            if (prd.checked == true) {
                Swal.fire({
                    type: 'success',
                    html: 'i am a text that should be copy',
                    width: 'auto',
                    confirmButtonText: 'Copy URLs',
                })

谢谢

Answer 1

您可以通过 html 和 Bootstrap 创建一个按钮，这样您就可以通过 onOpen 在按钮上附加一个处理程序。

像这样

Swal.fire({
    title: "Copy it!",
    html: 
        '<textarea id="text_to_be_copied" class="swal2-input" readonly>Some text you want to copy</textarea>' +
            '<button type="button" class="btn btn-default" id="btn-copy" style="margin-left:5px">Copy</button>' +
            '<button type="button" class="btn btn-primary swal-confirm" id="btn-ok" style="float:right" disabled>Text have been copied!</button>' +
        '</div>',
    showConfirmButton: false,
    type: "success",
    onOpen: () => {
        $("#btn-copy").click(() => {
            $("#btn-ok").prop('disabled', false);

            $("#text_to_be_copied").select();
            document.execCommand("copy");
        });

        $("#btn-ok").click(() => {
            Swal.close();   
        });
    }
});

以这种方式，“确认按钮”仅在您使用副本后显示，但您可以通过将 Swal.close() 放入复制按钮。这样点击复制按钮后，弹出窗口将关闭。

您也可以根据需要选择使用输入标签而不是文本区域。