这可能是重复的问题，但我没有找到解决方案。
我正在尝试在单击按钮时复制文本。它适用于 chrome、mozilla（适用于 windows 和 mac，但不适用于 linux）。而且它不适用于 safari。
我正在使用document.execCommand("copy") 命令进行复制。
safari 支持这个命令吗？
有什么方法可以支持所有浏览器吗？
【问题讨论】：
标签： javascript jquery google-chrome firefox safari
请检查我的解决方案。
它适用于 Safari（在 iPhone 7 和 iPad 上测试）和其他浏览器。
window.Clipboard = (function(window, document, navigator) {
var textArea,
copy;
function isOS() {
return navigator.userAgent.match(/ipad|iphone/i);
}
function createTextArea(text) {
textArea = document.createElement('textArea');
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 copyToClipboard() {
document.execCommand('copy');
document.body.removeChild(textArea);
}
copy = function(text) {
createTextArea(text);
selectText();
copyToClipboard();
};
return {
copy: copy
};
})(window, document, navigator);
// How to use
Clipboard.copy('text to be copied');
https://gist.github.com/rproenca/64781c6a1329b48a455b645d361a9aa3 https://fiddle.jshell.net/k9ejqmqt/1/
希望对你有所帮助。
问候。
【讨论】：
我发现对于 safari，需要在 document.execCommand() 起作用之前选择文本。
此外，其他浏览器 (deprecated in Chrome) 不支持 addRange()，这意味着在某些情况下它没有正确地将选择和范围合并在一起。这对用户体验意味着用户需要在 Safari 中单击两次才能复制该值。在添加范围之前添加 .removeAllRanges() 将有助于确保您为副本获取正确的选择。不清楚您是否还需要第二个 .removeAllRanges() 但我保留它以确保安全。
copy(id) {
var configId = document.querySelector(id);
var range = document.createRange();
range.selectNode(configId);
var selection = window.getSelection()
selection.removeAllRanges();
selection.addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
selection.removeAllRanges();
}
使用（在同一类中）：
<Button icon="copy" onClick={() => {this.copy(id)}}/>
id 可以是任何 html 选择器
这在 Chrome 和 Safari 中对我有用。
【讨论】：
因为第一个答案在 iPhone 10 Safari 上对我不起作用，所以我试图找到其他解决方案，但我发现了一个描述为 here
基本上它说的是一个非常相似的解决方案，但语法不同：
受“IE 10+、Chrome 43+、Firefox 41+ 和 Opera 29+”支持
var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
// Select the email link anchor text
var emailLink = document.querySelector('.js-emaillink');
var range = document.createRange();
range.selectNode(emailLink);
window.getSelection().addRange(range);
try {
// Now that we've selected the anchor text, execute the copy command
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy email command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
// Remove the selections - NOTE: Should use
// removeRange(range) when it is supported
window.getSelection().removeAllRanges();
});body {
padding: 10px;
}<p>Email me at <a class="js-emaillink" href="mailto:chriscoyier@gmail.com">chriscoyier@gmail.com</a></p>
<p><button class="js-emailcopybtn">Copy Email</button></p>它还提到了一个名为 clipboardjs 的库，看起来很棒。
在我的例子中，这个简单的 js 代码可以运行：
不幸的是它不起作用：
对于 Firefox，简单的选择和复制就可以了。
element.select();
document.execCommand('copy');
【讨论】：
这个问题问了 4 年后，
safari 添加了剪贴板 API！
您可以在 safari 上将文本和任意数据写入和读取到剪贴板（在 iOS 中从 v13.4 和桌面 v13.1 开始）。
MDN docs about Clipboard： Clipboard 接口实现 Clipboard API，提供——如果 用户授予权限——对 系统剪贴板。 Clipboard API 可用于实现剪切， 在 Web 应用程序中复制和粘贴功能。
这就是你可以实现你想要的：
navigator.clipboard.writeText("YOUR_TEXT").then(function() {
/* clipboard successfully set */
}, function() {
/* clipboard write failed */
});
【讨论】：
最近我偶然发现了同样的问题并发现了以下内容：
document.execCommand("copy") 现在可以在 Safari 中正常工作。
如果您有一个复制命令的特定用例仅在 safari 中不工作，您可能要检查的一件事是您的复制命令是否在 API 回调中或以其他类似的异步方式运行。此外，只有在来自 DOM 事件时才能在 Safari 中复制（控制台测试不起作用）。
对我来说，我要复制的文本来自异步调用的响应。我不得不将 API 调用移到 onClick 之外以预取文本，然后仅在单击复制按钮时复制该文本。成功了！
以下代码可以在 Safari 中正常工作（因为它直接写入到像 onClick 这样的 DOM 事件处理程序）：
var clipBoardElem = document.createElement("input");
document.body.appendChild(clipBoardElem);
clipBoardElem.value = "text";
clipBoardElem.select();
var successfulCopy = document.execCommand('copy');
完成后，您可以删除临时元素：
document.body.removeChild(clipBoardElem)
【讨论】：
使用copy 事件似乎对我有用。
window.addEventListener('copy', (event) => {
event.preventDefault();
event.clipboardData.setData('text/plain', `foo: ${Date.now()}`);
});click here, press Cmd-C, paste outside the browser在 Chrome 83、Safari 13.1、Firefox 77 中测试
【讨论】：
根据 CanIUse 的说法，iOS 上的 Safari 不支持 document.execCommand('copy')，可能是出于安全原因。
【讨论】：
copy to clipboard 的最佳方式是什么，或者我们如何在 safari 中做到这一点？
document.execCommand('copy') 实现的。查看源代码。
我遇到了同样的问题 - 原来我的问题是因为我创建了一个临时的 select 元素来复制文本，这很好，但我也通过各种方法隐藏它，罪魁祸首是 @ 987654322@。删除它并使用其他方法隐藏它解决了我的问题。
希望这对遇到同样问题的人有所帮助。
【讨论】：