为什么使用 JavaScript 复制到剪贴板不起作用?
Why copy to clipboard doesn't work using JavaScript?
我正在尝试这个功能:
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.textContent = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) :
false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
alert("Success");}
我试过 el.value = str;也。
我做错了什么?
使用这种方式将文本复制到剪贴板。
function copyToClipboradFunc() {
let copiedText = document.getElementById("copyMe");
copiedText.select();
copiedText.setSelectionRange(0, 99999);
document.execCommand("copy");
console.log("Copied the text: " + copiedText.value);
}
<input type="text" value="Amoos Check Console" id="copyMe">
<button onclick="copyToClipboradFunc()">Copy to Clipboard</button>
对您的代码进行了少量修改。
/*
YOUR CODE
*/
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.textContent = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) :
false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
alert("Copy Text: " + str );}
<!-- YOUR CODE -->
<button onclick="copyToClipboard('Your Function Copied')">Copy ( Original Function )</button>
您正在创建一个将在瞬间附加到 DOM 的元素,只是为了允许 execCommand("copy")
... 并且它将“显示”在左侧 -9999px
.
那么为什么 el.setAttribute('readonly', '');
?
只需删除它,然后重试。我的猜测是 el.select();
对 readonly
元素不起作用。
免责声明:我没有测试任何东西。但据我所读,这是唯一值得一提的奇怪事情。否则就是找到重复的答案或将其标记为 unreproducible.
document.execCommand
已被弃用,但仍可通过网络浏览器访问
navigator.clipboard API
是另一种选择navigator.clipboard
你像这样传入要复制到剪贴板的文本
navigator.clipboard.writeText(str_to_copy).then(success_callback, failure_callback);
请注意,此选项卡必须处于活动状态,否则您将无权复制剪贴板
API 是异步的,因此您可以使用 .then
回调来提醒用户复制剪贴板是否成功。查看 Can I Use 以了解它在 Web 浏览器中的可用性。
好吧,经过一番研究,我找到了解决方案。感谢@VLAZ 和@a.mola 我发现 execCommand 已被弃用。所以我开始寻找替代品。我在本页 Using the Clipboard API, that's from https://developer.mozilla.org/ 上发现了有关剪贴板 API 的信息,所以我们知道这是严肃的事情。不管怎样,这是我的工作函数:
function copyToClipboard(str) {
navigator.permissions.query({
name: "clipboard-write"
}).then(result => {
if (result.state == "granted") {
navigator.clipboard.writeText(str).then(function () {
alert("Enlace copiado con succeso!");
}, function () {
alert("No fue posible copiar el enlace.");
});
}
});
};
我正在尝试这个功能:
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.textContent = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) :
false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
alert("Success");}
我试过 el.value = str;也。 我做错了什么?
使用这种方式将文本复制到剪贴板。
function copyToClipboradFunc() {
let copiedText = document.getElementById("copyMe");
copiedText.select();
copiedText.setSelectionRange(0, 99999);
document.execCommand("copy");
console.log("Copied the text: " + copiedText.value);
}
<input type="text" value="Amoos Check Console" id="copyMe">
<button onclick="copyToClipboradFunc()">Copy to Clipboard</button>
对您的代码进行了少量修改。
/*
YOUR CODE
*/
function copyToClipboard(str) {
const el = document.createElement('textarea');
el.textContent = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) :
false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
alert("Copy Text: " + str );}
<!-- YOUR CODE -->
<button onclick="copyToClipboard('Your Function Copied')">Copy ( Original Function )</button>
您正在创建一个将在瞬间附加到 DOM 的元素,只是为了允许 execCommand("copy")
... 并且它将“显示”在左侧 -9999px
.
那么为什么 el.setAttribute('readonly', '');
?
只需删除它,然后重试。我的猜测是 el.select();
对 readonly
元素不起作用。
免责声明:我没有测试任何东西。但据我所读,这是唯一值得一提的奇怪事情。否则就是找到重复的答案或将其标记为 unreproducible.
document.execCommand
已被弃用,但仍可通过网络浏览器访问
navigator.clipboard API
是另一种选择navigator.clipboard
你像这样传入要复制到剪贴板的文本
navigator.clipboard.writeText(str_to_copy).then(success_callback, failure_callback);
请注意,此选项卡必须处于活动状态,否则您将无权复制剪贴板
API 是异步的,因此您可以使用 .then
回调来提醒用户复制剪贴板是否成功。查看 Can I Use 以了解它在 Web 浏览器中的可用性。
好吧,经过一番研究,我找到了解决方案。感谢@VLAZ 和@a.mola 我发现 execCommand 已被弃用。所以我开始寻找替代品。我在本页 Using the Clipboard API, that's from https://developer.mozilla.org/ 上发现了有关剪贴板 API 的信息,所以我们知道这是严肃的事情。不管怎样,这是我的工作函数:
function copyToClipboard(str) {
navigator.permissions.query({
name: "clipboard-write"
}).then(result => {
if (result.state == "granted") {
navigator.clipboard.writeText(str).then(function () {
alert("Enlace copiado con succeso!");
}, function () {
alert("No fue posible copiar el enlace.");
});
}
});
};