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()放在復制按鈕的處理程序中來擺脫它。 這樣點擊復制按鈕后，彈出窗口就會關閉。

根據您的需要，您還可以選擇使用輸入標簽而不是文本區域。

Answer 2

var txtToBeCopied ='i am a text that should be copy';

    if (prd.checked == true) {
                Swal.fire({
                    type: 'success',
                    html: txtToBeCopied,
                    width: 'auto',
                    confirmButtonText: 'Copy URLs',
                },
 function(isConfirm){

   if (isConfirm){

     /* Get the text field */
  var copyText = txtToBeCopied;

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /*For mobile devices*/

  /* Copy the text inside the text field */
  document.execCommand("copy");


    }
 })
 }