如何在JavaScript中复制到剪贴板？
将文本复制到剪贴板的最佳方式是什么？ （多浏览器）
我努力了：
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
但在Internet Explorer中会出现语法错误。 在Firefox中，它表示unsafeWindow is not defined 。
不带闪光灯的好技巧：Trello如何访问用户的剪贴板？
概观
有3个主要浏览器API用于复制到剪贴板：
[navigator.clipboard.writeText] document.execCommand('copy') 一般发展笔记
当您在控制台中测试代码时，不要期望剪贴板相关命令可以正常工作。 一般来说，该页面需要处于活动状态（异步剪贴板API）或需要用户进行交互（例如用户单击）以允许（ document.execCommand('copy') ）访问剪贴板，以获取更多详细信息。
异步+后备
由于浏览器支持新的Async Clipboard API级别，您可能需要回退到document.execCommand('copy')方法以获得良好的浏览器覆盖率。
这是一个简单的例子：
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>自动复制到剪贴板可能是危险的，因此大多数浏览器（IE除外）都非常困难。 我个人使用以下简单的技巧：
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
用户将看到提示框，其中要复制的文本已被选中。 现在，按Ctrl + C和Enter键（关闭框）就足够了 - 瞧！
现在剪贴板复制操作是安全的，因为用户手动执行它（但是以一种非常简单的方式）。 当然，适用于所有浏览器。
<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>
<script>
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
</script>以下方法适用于Chrome，Firefox，Internet Explorer和Edge以及最新版本的Safari（2016年10月发布的版本10中增加了复制支持）。
注意：您不会看到textarea，因为它是在同一个Javascript代码的同步调用中添加和删除的。
如果你正在自己实现这一点，有些事情需要注意：
下面的函数应尽可能干净地处理以下所有问题。 如果您发现任何问题或有任何改进建议，请留下评论。
// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and IE 10+.
// IE: The clipboard feature may be disabled by an administrator. By
// default a prompt is shown the first time the clipboard is
// used (per session).
function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
} finally {
document.body.removeChild(textarea);
}
}
}
https://jsfiddle.net/fx6a6n6x/
链接地址: http://www.djcxy.com/p/439.html