剪贴板复制在jquery ajax成功方法中不起作用
我想将卡号复制到剪贴板中，以便可以将其粘贴到记事本中。我从互联网上得到的代码，如果在浏览器的开发工具栏中尝试一下，效果很好。但是，如果我将该代码添加到我的Javascript文件中并运行该项目，那么它将无法工作。代码如下：
$.ajax({
type: "POST",
url: '@Url.Action("CopyToClipboard", "MyAccountSurface")',
data: {
controlId: controlId
},
dataType: 'json',
success: function(data) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val(data.CardNumber).select();
document.execCommand("copy");
$temp.remove();
alert('copied successfully');
}
});回答 7
Stack Overflow用户
发布于 2016-12-28 19:53:37
更新：
用户交互是执行document.execCommand所必需的。因此，在您的示例中，不可能从AJAX Response复制文本。It is the security measure that browsers agreed upon.
参考W3C API
如果事件是从用户信任并触发的事件调度的，或者如果实现被配置为允许这样做，则通过脚本API触发的
复制和剪切命令只会影响实际剪贴板的内容。
user interaction的解决方法
添加的步骤：
使用relative position.
- Add a
- 将一个处于禁用状态的按钮放置在远离网页的文本框中。一旦数据可用，请重新启用该按钮。由于您直接与浏览器(
Hence no security issue as mentioned in API)
交互，因此在单击按钮时执行
- 将能够执行
document.execCommand
$(document).ready(function() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com' + '/posts/1',
method: 'GET'
}).then(function(data) {
console.log(data);
$('#toBeCopied').val(data.title);
$("#copyIt").attr('disabled', null);
});
});
function copyToClipboard(){
var $temp = $("<input />");
$("body").append($temp);
$temp.val($("#toBeCopied").val()).select();
var result = false;
try {
result = document.execCommand("copy");
} catch (err) {
console.log("Copy error: " + err);
}
$temp.remove();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" value="dummy" id="toBeCopied" style="display:none; position: relative; left: -1000px;">
<b>Below button will be enabled once the data is available from AJAX</b>
<button id="copyIt" onclick="copyToClipboard()" disabled>Copy To Clipboard</button>
Stack Overflow用户
发布于 2018-08-23 17:56:30
如果你想复制到剪贴板上点击使用Ajax
元素有一些事件：mousedown和 click 。它们是按这个顺序触发的。这意味着您可以在第一个请求中发送ajax请求，并在最后一个请求中处理结果，在这种情况下，您将不会有安全问题。
让我来分享一下工作示例：
$link.on("mousedown", function() {
var url = $(this).data("url");
var $temp = $("<input id='copy_container' style='position:fixed;left:-200px;'>");
$.ajax({
url: url,
dataType: "json",
success: function (data) {
$("body").append($temp);
$temp.val(data.text);
}
})
})
$link.on("click", function() {
setTimeout(function() {
var $input = $("input#copy_container");
if ($input.length && $input.val().length > 0) {
$input.select();
document.execCommand("copy");
$input.remove();
}
}, 100)
})你需要100ms的超时时间来等待ajax响应。它可以像你想要的那样改进。
固定的和负面的位置-我想你知道我们为什么需要它。
Stack Overflow用户
发布于 2016-12-28 19:28:11
那么，你要复制什么呢？document.execCommand("copy");要求首先选择(突出显示)某些内容。
我认为在您的示例中，select遵循.val()。但是为了让它起作用，你需要选择一个元素，而不是它的值。
$temp.val(data.CardNumber);
$temp.select();
copied = document.execCommand("copy");
$temp.remove();
if(copied){
alert('copied successfully');
}else{
alert('something went wrong');
}https://stackoverflow.com/questions/41361081
复制相似问题
腾讯云开发者
