使用 FireFox、 Safari 和 Chrome 复制/放置文本到剪贴板上

小开

出于安全原因，Firefox 不允许您在剪贴板上放置文本。但是，有一个可用的解决方案使用 Flash。

function copyIntoClipboard(text) {


var flashId = 'flashId-HKxmj5';


/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';


if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}

唯一的缺点是，这需要启用 Flash。

源代码目前已经死亡: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/(它的谷歌缓存也是)

小开

Firefox 的确允许您在剪贴板中存储数据，但是由于安全隐患，默认情况下它是禁用的。了解如何在 MozillaFirefox 知识库的 "Granting JavaScript access to the clipboard"中启用它。

The solution offered by amdfan is the best if you are having a lot of users and configuring their browser isn't an option. Though you could test if the clipboard is available and provide a link for changing the settings, if the users are tech savvy. The JavaScript editor TinyMCE follows this approach.

小开

CopyIntoClipboard ()函数适用于 Flash 9，但它似乎被 Flash 播放器10的发布打破了。这里有一个新的 flash 播放器的解决方案:

Http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

这是一个复杂的解决方案，但它确实有效。

小开

我不得不说，这些解决方案真的都不起作用。我已经尝试了剪贴板解决方案从接受的答案，它不与 Flash 播放器10工作。我也试过 ZeroClipboard，有一段时间我对它非常满意。

我目前正在我自己的网站上使用它(http://www.blogtrog.com) ，但是我一直注意到它有一些奇怪的 bug。ZeroClipboard 的工作方式是将一个不可见的 flash 对象放在页面元素的顶部。我发现，如果我的元素移动(比如当用户调整窗口大小时，我让东西右对齐) ，ZeroClipboard 闪光对象就会失控，不再覆盖对象。我怀疑它可能还在原来的地方。他们的代码应该能够阻止这种情况的发生，或者将其重新粘贴到元素上，但是它似乎并不能很好地工作。

所以... 在 BlogTrog 的下一个版本中，我想我会使用我在野外看到的所有其他代码高亮显示器，并删除我的“复制到剪贴板”按钮。:-(

(我注意到 dp.syntaxhiglight 的 Copy to Clipboard 现在也坏了。)

小开

在线电子表格应用程序钩住 Ctrl + C和 Ctrl + V事件，将焦点转移到一个隐藏的 TextArea 控件，或者将其内容设置为所需的新剪贴板内容以供复制，或者在事件完成粘贴后读取其内容。

参见 有没有可能在 Firefox，Safari 和 Chrome 中使用 JavaScript 阅读剪贴板。

小开

Flash 解决方案的一个小改进是使用 swfobject 检测 Flash 10:

Http://code.google.com/p/swfobject/

然后，如果它显示为 Flash 10，尝试加载一个 Shockwave 对象使用 JavaScript。Shockwave 可以对剪贴板(所有版本)进行读/写操作，也可以使用行话中的 coptoClipboard ()命令。

小开

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp works with Flash 10 and all Flash enabled browsers.

Also ZeroClipboard has been updated to avoid the bug mentioned about page scrolling causing the Flash movie to no longer be in the correct place.

由于该方法“要求”用户点击一个按钮复制，这是一个方便的用户，没有任何不法行为正在发生。

小开

我已经使用了 GitHub 的 Clippy来满足我的需要，它是一个简单的基于 Flash 的按钮。如果不需要样式并且喜欢事先在服务器端插入 what to paste，那么它就可以正常工作。

小开

尝试创建一个存储所选内容的内存全局变量。然后，另一个函数可以访问变量并进行粘贴。比如说,

var memory = ''; // Outside the functions but within the script tag.


function moz_stringCopy(DOMEle, firstPos, secondPos) {


var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}


function moz_stringPaste(DOMEle, newpos) {


DOMEle.value = DOMEle.value.slice(0, newpos) + memory + DOMEle.value.slice(newpos);
}

小开

点击这个链接:

授予对剪贴板的 JavaScript 访问权限

正如所有人说的，出于安全原因，默认禁用它。上面的页面显示了如何启用它的说明(通过在 Firefox 或 User.js文件中编辑 关于: 配置)。

幸运的是，有一个名为“ AllowClipboardHelper”的插件，只需点击几下就可以让事情变得更简单。但是你仍然需要告诉你网站的访问者如何在 Firefox 中进行访问。

小开

如果支持 Flash，则可以使用翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳 https://everyplay.com/assets/clipboard.swf并使用 Flash 变量文本来设置文本。

Https://everyplay.com/assets/clipboard.swf?text=it%20works

这是一个我用来复制，你可以设置为额外的，如果它不支持这些选项。你可使用:

Internet Explorer:

window.clipboardData.setData(DataFormat, Text) and window.clipboardData.getData(DataFormat)

可以将 DataFormat 的 Text 和 URL 用于 getData 和 setData。

And to delete data:

You can use the DataFormat's File, HTML, Image, Text and URL. PS: You need to use window.clipboardData.clearData(DataFormat);.

对于其他不支持 window.clipboardData 和 swf Flash 文件的操作系统，你也可以使用键盘上的 Control + C按钮。对于 Mac 操作系统，你也可以使用键盘上的 Command + C按钮。

小开

来自 addon 代码:

对于如何从 Chrome 代码实现这一点，您可以使用 nsIClipboardHelper 接口，如下所述: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

小开

现在是2015年夏天，围绕着 Flash 的混乱如此之多，以下是如何完全避免使用它的方法。

Js 是一个很好的实用程序，它允许将文本或 html 数据复制到剪贴板。它非常容易使用，只需包含。使用这样的东西:

<button id='markup-copy'>Copy Button</button>


<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});


});
</script>

Js 也是 on GitHub。

小开

最佳答案

现在有一种方法可以在大多数现代浏览器中使用

document.execCommand('copy');

This will copy currently selected text. You can select a textArea or input field using

document.getElementById('myText').select();

要以不可见的方式复制文本，您可以快速生成 textArea，修改框中的文本，选择它，复制它，然后删除 textArea。在大多数情况下，这个 textArea 甚至不会在屏幕上闪现。

出于安全原因，浏览器只允许在用户采取某种行动(即。点击按钮)。一种方法是向调用复制文本的方法的 html 按钮添加 onClick 事件。

一个完整的例子:

function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

小开

使用 document.execCommand('copy')。最新版本的 Chrome、 Firefox、 Edge 和 Safari 都支持 document.execCommand('copy')。

function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}




var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

小开

使用现代的 document.ExecCommand (“ copy”)和 jQuery 参见这个堆栈溢出的答案。

var ClipboardHelper = { // As Object


copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput =  $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};

怎么说:

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

// jQuery document
;(function ( $, window, document, undefined ) {


var ClipboardHelper = {


copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput =  $("<textarea>");
$("body").append($tempInput);


//todo prepare Text: remove double whitespaces, trim


$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};


$(document).ready(function()
{
var $body = $('body');


$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn = $(this);
var text = $btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});


$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>


<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>

小开

到2017年，你可以这样做:

function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}


document.addEventListener('copy', handler, true);
document.execCommand('copy');
}

And now to copy copyStringToClipboard('Hello, World!')

如果您注意到 setData行，并想知道是否可以设置不同的数据类型，那么答案是肯定的。

小开

剪贴板 API 旨在取代 document.execCommand。Safari 仍然处于支持阶段，所以您应该提供一个备份，直到规范解决并且 Safari 完成实现。

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};

<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>

出于安全原因，剪贴板 Permissions可能需要读写从剪贴板。如果代码片段不能在 Stack Overflow 上工作，那么可以尝试在本地主机或其他受信任的域上使用它。

小开

基于优秀的来自工作室的大卫的回答，它可以在 Safari，Firefox 和 Chrome 中工作。它也确保没有闪烁可以发生从 textarea把它离开屏幕。

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


function copyText(text) {
// Create temp element off-screen to hold text.
var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
$("body").append(tempElem);


tempElem.val(text).select();
document.execCommand("copy");
tempElem.remove();
}




// ============================================================================
// Class API
// ============================================================================
return {
copyText: copyText
};
})();