我正在尝试将SweetAlert与clipboard.js库一起使用。
当用户在SweetAlert上进行确认时,我曾尝试模拟HTML按钮的单击,但是它不起作用。
这是我尝试做的事情:
我的HTML:
<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>
我的JavaScript函数:
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
和我的SweetAlert的结构:
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");
});
它可以在没有甜蜜警报的情况下正常工作,但是无法模拟复制按钮上的单击,因此我无法找到使它正常工作的方法。
最佳答案
您的甜蜜提示正在呼叫$("#copyBtn").click();
,我不确定这是否有必要。
无论如何,您都已在此按钮中设置了onclick="copyText();"
,但从未定义copyText
函数。
定义函数或删除onclick属性。
这是定义了空的copyText
函数的工作代码。
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");
}
);
/*fit into snippet window*/
.sweet-alert { margin: auto; transform: scale(.75); }
<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>
如果要在按钮上触发警报,请单击
swal
函数,并将其放在onclick中定义的函数内:您的甜蜜提示正在呼叫
$("#copyBtn").click();
,我不确定这是否有必要。无论如何,您都已在此按钮中设置了
onclick="copyText();"
,但从未定义copyText
函数。定义函数或删除onclick属性。
这是定义了空的
copyText
函数的工作代码。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");
});
}
/*fit into snippet window*/
.sweet-alert {
margin: auto;
transform: scale(.75);
}
<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>