Question

我尝试将SweetAlert与clipboard.js库一起使用。当用户在SweetAlert上确认时，我尝试模拟单击HTML按钮，但它没有工作。

以下是我尝试过的事情：

我的HTML：

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

我的JavaScript功能：

swal({
  title: "Copy the text?",
  text: "Are you sure you want to copy it to clipboard?",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, copy it!",
  closeOnConfirm: false
},
function(){
  $("#copyBtn").click(); // simulates click on html button.
  swal("Copied!", "The text has been copied.", "success");
});

我的SweetAlert结构：

{{1}}

它没有甜蜜警报就可以正常工作，但它不会模拟复制按钮上的点击，我无法找到使其正常工作的方法。

Answer 1

您的甜蜜提醒是$("#copyBtn").click();，我不确定是否有必要。

在任何情况下，您都在此按钮中设置了onclick="copyText();"，但从未定义过copyText功能。

定义函数或删除onclick属性。

这里的工作代码定义了一个空的copyText函数。

＆＃13;

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
    console.log('Copied text: ' + e.text);
});
clipboard.on('error', function(e) {
    console.log(e);
});
function copyText() {

}

swal({
  title: "Copy the text?",
  text: "Are you sure you want to copy it to clipboard?",
  //type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, copy it!",
  closeOnConfirm: false
},
function(){
  $("#copyBtn").click(); // simulates click on html button.
  swal("Copied!", "The text has been copied.", "success");
}
);

＆＃13;

/*fit into snippet window*/
.sweet-alert { margin: auto; transform: scale(.75); }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>


<button class="btn btn-primary" id="copyBtn" data-clipboard-target="#info_block" onclick="copyText();">
    Copy Text!
</button>

<div id="info_block" name="info_block">
    Some example text 
</div>

＆＃13;

如果要在按钮上单击警告，请将swal函数放在onclick中定义的函数内：

您的甜蜜提醒是$("#copyBtn").click();，我不确定是否有必要。

在任何情况下，您都在此按钮中设置了onclick="copyText();"，但从未定义过copyText功能。

定义函数或删除onclick属性。

这里的工作代码定义了一个空的copyText函数。

＆＃13;

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
  console.log('Copied text: ' + e.text);
});
clipboard.on('error', function(e) {
  console.log(e);
});

function copyText() 
{
  swal({
      title: "Copy the text?",
      text: "Are you sure you want to copy it to clipboard?",
      //type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#DD6B55",
      confirmButtonText: "Yes, copy it!",
      closeOnConfirm: false
    },
    function() {
      swal("Copied!", "The text has been copied.", "success");
    });
}

＆＃13;

/*fit into snippet window*/

.sweet-alert {
  margin: auto;
  transform: scale(.75);
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>


<button class="btn btn-primary" id="copyBtn" data-clipboard-target="#info_block" onclick="copyText();">
    Copy Text!
</button>

<div id="info_block" name="info_block">
  Some example text
</div>

＆＃13;

Answer 2

通过此变体，可以使用较新的 SweetAlert2.js。

function copyText(){

    var copy = $('.copy_text').val();
    $('.copy_text').select();
    document.execCommand('copy');
    
    Swal.fire({
        icon: 'success',
        title: 'Text copied to clipboard',
        text: copy,
        showConfirmButton: false,
        timer: 3000
    });
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<input type="text" class="copy_text" value="Hello World!">
<button onclick="copyText()">Copy to clipboard</button>

如何在clipboard.js库中使用SweetAlert？

2 个答案: