在Internet Explorer中,我可以使用剪贴板数据对象来访问剪贴板。如何在FireFox,Safari和/或Chrome中做到这一点?
在Internet Explorer中,我可以使用剪贴板数据对象来访问剪贴板。如何在FireFox,Safari和/或Chrome中做到这一点?
Answers:
现在,有一种方法可以轻松地在大多数现代浏览器中使用
document.execCommand('copy');
这将复制当前选择的文本。您可以使用选择文本区域或输入字段
document.getElementById('myText').select();
要无形地复制文本,您可以快速生成一个textArea,在框中修改文本,选择它,复制它,然后删除textArea。在大多数情况下,此textArea甚至不会闪烁到屏幕上。
出于安全原因,仅当用户采取某种措施(例如,单击按钮)时,浏览器才允许您复制。一种方法是将onClick事件添加到html按钮,该按钮调用复制文本的方法。
一个完整的例子:
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
出于安全原因,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/(这就是Google缓存)
Online Spreadsheets钩住Ctrl + C,Ctrl + V事件并将焦点转移到隐藏的TextArea控件,并将其内容设置为所需的新剪贴板内容以进行复制,或者在事件完成粘贴后读取其内容。
现在是2015年夏季,Flash充满了动荡,我想为这个问题添加一个新的答案,避免完全使用它。
剪贴板.js是一个很好的实用程序,它允许将文本或html数据复制到剪贴板。它非常易于使用,只需包含.js并使用如下代码:
<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>
Clipper.js也在GitHub上
在2017年,您可以执行此操作(之所以这样说是因为该线程将近9年了!)
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');
}
现在复制 copyStringToClipboard('Hello World')
如果您注意到这一setData
行,并且想知道是否可以设置其他数据类型,那么答案是肯定的。
.select()
在输入框上运行A ,然后再调用它。
Firefox确实允许您将数据存储在剪贴板中,但是由于安全隐患,默认情况下将其禁用。请参阅“授予对剪贴板的JavaScript访问权限”中的启用方法 Mozilla Firefox知识库中的。
如果您有很多用户,并且不能配置他们的浏览器,那么amdfan提供的解决方案是最好的。尽管您可以测试剪贴板是否可用并提供用于更改设置的链接,但是如果用户精通技术。JavaScript编辑器TinyMCE遵循这种方法。
copyIntoClipboard()函数适用于Flash 9,但似乎已随Flash Player 10的发布而中断。以下是可与新Flash Player配合使用的解决方案:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
这是一个复杂的解决方案,但确实有效。
我不得不说,这些解决方案的真正起作用。我已经从可接受的答案中尝试了剪贴板解决方案,但是它不适用于Flash Player10。我也尝试了ZeroClipboard,我对此感到非常满意。
我目前在自己的网站(http://www.blogtrog.com),但是我一直注意到它的怪异错误。ZeroClipboard的工作方式是将不可见的Flash对象放在页面上元素的顶部。我发现,如果我的元素移动了(例如当用户调整窗口大小并且我对齐了东西时),ZeroClipboard Flash对象将摆脱困境,不再覆盖该对象。我怀疑它可能仍然坐在原来的位置。他们的代码应该停止该代码,或者将其重新粘贴到该元素上,但是似乎无法正常工作。
因此,在下一个BlogTrog版本中,我想我会沿用我在野外看到的所有其他代码突出显示,并删除“复制到剪贴板”按钮。:-(
(我注意到dp.syntaxhiglighter的“复制到剪贴板”现在也已损坏。)
问题太老了,但我在任何地方都没有看到这个答案...
检查此链接:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
就像每个人所说的,出于安全原因,默认情况下是禁用的。上面的链接显示了如何启用它的说明(通过在firefox或user.js中编辑about:config)。
幸运的是,有一个名为“ AllowClipboardHelper”的插件,只需单击几下即可使事情变得更容易。但是,您仍然需要指导网站的访问者如何在firefox中启用访问。
使用现代的document.execCommand(“ copy”)和jQuery。查看此stackoverflow答案
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>
Flash解决方案的一个小改进是使用swfobject检测Flash 10:
http://code.google.com/p/swfobject/
然后如果显示为Flash 10,请尝试使用javascript加载Shockwave对象。Shockwave可以使用lingo中的copyToClipboard()命令来读取/写入剪贴板(所有版本)。
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp适用于Flash 10和所有启用Flash的浏览器。
ZeroClipboard也进行了更新,以避免提及页面滚动所引起的错误,该错误导致Flash电影不再位于正确的位置。
由于该方法“要求”用户单击按钮以进行复制,因此这给用户带来了便利,并且没有发生任何恶意事件。
尝试创建一个存储选择的内存全局变量,然后另一个函数可以访问该变量并进行粘贴。
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);
}
如果您支持Flash,则可以使用https://everyplay.com/assets/clipboard.swf并使用flashvars文本设置文本
https://everyplay.com/assets/clipboard.swf?text=It%20Works
那就是我用来复制的那个,如果不支持这些选项,您可以设置为额外的:
对于Internet Explorer: window.clipboardData.setData(DataFormat,Text)和window.clipboardData.getData(DataFormat)
您可以使用DataFormat的Text和Url来获取Data和setData。
并删除数据:
您可以使用DataFormat的文件,HTML,图像,文本和URL。PS:您需要使用window.clipboardData.clearData(DataFormat);
对于不支持window.clipboardData和swf flash文件的其他文件,您还可以在Windows键盘上使用Ctrl + C按钮,对于Mac,也可以使用其命令+ c
从附加代码:
如果其他人正在从Chrome代码中寻找方法,则可以使用nsIClipboardHelper界面,如下所示:https : //developer.mozilla.org/en-US/docs/Using_the_Clipboard
使用document.execCommand('copy')
。支持最新版本的Chrome
,Firefox
,Edge
,和Safari
。
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>
剪贴板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="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>
出于安全原因,Permissions
可能有必要从剪贴板读取和写入剪贴板。如果该代码段无法正常运行,请尝试localhost
或信任该域。
基于Studio.201中@David的出色回答,它可以在Safari,FF和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
};
})();
copy
,developer.chrome.com