我研究了一堆答案和文章,它们展示了如何通过 jquery 在按钮单击时复制文本,但没有一个对我有用。我通过 ajax 将一个值附加到 DOM 中,并且希望通过单击按钮来复制该值。
所有这些解决方案都适用于 chrome,如果使用 jsfiddle/codepen,它们也适用于 safari(版本:13.0.5),但是当通过单独的 html 和 js 文件使用时,它们在 safari 中不起作用,无论如何,就我而言。
首先,我尝试使用position:absolute和左侧:-99999 进行不可见输入,并使用 jquery 选择其中的文本并使用 execCommand("copy");。这不起作用。 我还尝试了这里提到的答案:Javascript Copy To Clipboard on safari?
我也尝试了下面提到的两个功能,但没有成功。除了这些功能之外,我还尝试了我能找到的所有 javascript 插件,但这些插件也不起作用。
功能1:
function copy(value, showNotification, notificationText) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val(value).select();
document.execCommand("copy");
$temp.remove();
$(".copyfrom").val(value)
$(".copyfrom").select();
document.execCommand("copy");
//trigger animation---
if (typeof showNotification === 'undefined') {
showNotification = true;
}
if (typeof notificationText === 'undefined') {
notificationText = "Copied to clipboard";
}
var notificationTag = $("div.copy-notification");
if (showNotification && notificationTag.length == 0) {
notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
$("body").append(notificationTag);
notificationTag.fadeIn("slow", function () {
setTimeout(function () {
notificationTag.fadeOut("slow", function () {
notificationTag.remove();
});
}, 1000);
});
}
}
函数2:
function copyToClipboard(textToCopy) {
var textArea;
function isOS() {
return navigator.userAgent.match(/ipad|iphone/i);
}
function createTextArea(text) {
textArea = document.createElement('textArea');
textArea.readOnly = true;
textArea.contentEditable = true;
textArea.value = text;
document.body.appendChild(textArea);
}
function selectText() {
var range, selection;
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
}
function copyTo() {
document.execCommand('copy');
document.body.removeChild(textArea);
}
createTextArea(textToCopy);
selectText();
copyTo();
//trigger animation---
if (typeof showNotification === 'undefined') {
showNotification = true;
}
if (typeof notificationText === 'undefined') {
notificationText = "Copied to clipboard";
}
var notificationTag = $("div.copy-notification");
if (showNotification && notificationTag.length == 0) {
notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
$("body").append(notificationTag);
notificationTag.fadeIn("slow", function () {
setTimeout(function () {
notificationTag.fadeOut("slow", function () {
notificationTag.remove();
});
}, 1000);
});
}
}
这是我的 ajax 和 html:
$(".fa-link").on("click", function () {
var mlink = $(".boxmlink").attr("href").trim()
var fetchWallID = new XMLHttpRequest()
fetchWallID.open("POST", db, true);
fetchWallID.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
fetchWallID.onload = function () {
if (this.status == 200) {
var url = $(location).attr("href").split("?")
var id = (this.responseText).trim()
var windowurl = url[0].trim()
var finalurl = (windowurl + '?wallid=' + id).trim().replace("#", '')
//copy(finalurl, true)
//copyToClipboard(finalurl)
}
}
fetchWallID.send("mlinkID=" + mlink)
})
html:
<a href="#" class="fa fa-link"></a>
最佳答案
创建一个 textarea
元素,选择它然后将文本附加到它应该可以解决问题。在 Safari 版本 12.0.3 上测试。您的版本似乎执行相同的操作,但步骤更多。请确保它的每个部分都能正常工作。
function copy(str) {
const el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
document.getElementById('button').addEventListener('click', evt => {
copy(document.getElementById('test').innerHTML);
});
<span id=test>Hello World!</span>
<button id=button>Copy Text</button>
<input placeholder='Paste in Me!'/>
关于javascript - 如何使用 jquery/javascript 在 safari 中复制到剪贴板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60418518/