简体   繁体   English

复制到没有Flash的剪贴板

[英]Copy to clipboard without Flash

I found many solutions for copying to the clipboard, but they all either with flash, or for websites side. 我找到了许多复制到剪贴板的解决方案,但它们都可以使用闪存或网站方面。 I'm looking for method copy to clipboard automatically, without flash and for user side, it's for userscripts and of course cross-browser. 我正在寻找方法复制到剪贴板自动,没有闪存和用户方面,它是用户脚本,当然是跨浏览器。

Without flash, it's simply not possible in most browsers. 没有闪存,在大多数浏览器中根本不可能。 The user's clipboard is a security-relevant resource since it could contain things like passwords or credit card numbers. 用户的剪贴板是一种与安全相关的资源,因为它可能包含密码或信用卡号等内容。 Thus, browsers rightly don't allow Javascript access to it (some allow it with a warning shown that the user has confirm, or with signed Javascript code, but none of that is cross-browser). 因此,浏览器正确地不允许Javascript访问它(有些允许它显示用户已经确认的警告,或者使用签名的Javascript代码,但没有一个是跨浏览器)。

I had tryed the flash solution and I don't liked too. 我曾尝试过闪存解决方案而且我也不喜欢。 Too complex and too slow. 太复杂太慢了。 What I did was to create a textarea, put the data into that and use the browser "CTRL + C" behavior. 我所做的是创建一个textarea,将数据放入其中并使用浏览器“CTRL + C”行为。

The jQuery javascript part: jQuery javascript部分:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

The HTML part: HTML部分:
<textarea id="textArea1"></textarea>

Now, put what do you want to copy in 'PUT THE TEXT TO COPY HERE. 现在,把你要复制的东西放在'PUT THE TEXT TO COPY HERE中。 CAN BE A FUNCTION.' 可以成为一种功能。 area. 区域。 Works fine for me me. 对我来说工作正常。 You just have to make one CTRL+C combination. 你只需要制作一个CTRL + C组合。 The only drawback is that you are going to have an ugly textarea displayed in you site. 唯一的缺点是你将在你的网站上显示一个丑陋的textarea。 If you use the style="display:none" the copy solution will not work. 如果使用style =“display:none”,则复制解决方案将不起作用。

clipboard.js has just been released to copy to clipboard without the need of Flash clipboard.js刚刚发布,无需Flash即可复制到剪贴板

See it in action here > http://zenorocha.github.io/clipboard.js/#example-action 请在此处查看> http://zenorocha.github.io/clipboard.js/#example-action

It's finally here! 终于来了! (As long as you don't support Safari or IE8... -_- ) (只要你不支持Safari或IE8 ...... -_-)

You can now actually handle clipboard actions without Flash. 您现在可以实际处理没有Flash的剪贴板操作。 Here's the relevant documentation: 这是相关文档:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

While waiting impatiently for Xbrowser support of the Clipboard API ... 不耐烦地等待 Xbrowser对Clipboard API的支持时......


This will work beautifully in Chrome, Firefox, Edge, IE 这将在Chrome,Firefox,Edge,IE中得到很好的体现

IE will only prompt the user once to access the Clipboard. IE将仅提示用户访问剪贴板。
Safari (5.1 at the time of writing) does not support execCommand for copy/cut Safari (撰写本文时为5.1) 不支持execCommand进行copy/cut

 /** * CLIPBOARD * https://stackoverflow.com/a/33337109/383904 */ const clip = e => { e.preventDefault(); const cont = e.target.innerHTML; const area = document.createElement("textarea"); area.value = e.target.innerHTML; // or use .textContent document.body.appendChild(area); area.select(); if(document.execCommand('copy')) console.log("Copied to clipboard"); else prompt("Copy to clipboard:\\nSelect, Cmd+C, Enter", cont); // Saf, Other area.remove(); }; [...document.querySelectorAll(".clip")].forEach(el => el.addEventListener("click", clip) ); 
 <a class="clip" href="#!">Click an item to copy</a><br> <a class="clip" href="#!"><i>Lorem</i></a><br> <a class="clip" href="#!"><b>IPSUM</b></a><br> <textarea placeholder="Paste here to test"></textarea> 

All browsers (except Firefox which is able to only handle mime type "plain/text" as far as I've tested) have not implemented the Clipboard API . 所有浏览器(除了我只测试过只能处理mime类型"plain/text" Firefox)都没有实现 Clipboard API Ie, trying to read the clipboard event in Chrome using 即,尝试使用Chrome浏览器中的剪贴板事件

 var clipboardEvent = new ClipboardEvent("copy", { dataType: "plain/text", data: "Text to be sent to clipboard" }); 

throws: Uncaught TypeError: Illegal constructor throws: Uncaught TypeError:非法构造函数

The best resource of the unbelievable mess that's happening among browsers and the Clipboard can be seen here (caniuse.com) (→ Follow the comments under "Notes" ). 浏览器和剪贴板之间发生的令人难以置信的混乱的最佳资源可以在这里看到(caniuse.com) (→按照“注释”下的注释 )。
MDN says that basic support is "(YES)" for all browsers which is inaccurate cause one would expect at least the API to work, at all. MDN表示,所有浏览器的基本支持都是“(YES)” ,这是不准确的,因为人们至少会期望API能够正常工作。

You can use a clipboard local to the HTML page. 您可以使用HTML页面的本地剪贴板。 This allows you to copy/cut/paste content WITHIN the HTML page, but not from/to third party applications or between two HTML pages. 这允许您在HTML页面中复制/剪切/粘贴内容,但不能从/到第三方应用程序或两个HTML页面之间复制/剪切/粘贴内容。

This is how you can write a custom function to do this (tested in chrome and firefox): 这是你可以编写一个自定义函数来执行此操作(在chrome和firefox中测试):

Here is the FIDDLE that demonstrates how you can do this. 这是FIDDLE ,演示了如何做到这一点。

I will also paste the fiddle here for reference. 我也会在这里粘贴小提琴以供参考。


HTML HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy') will do what you want. document.execCommand('copy')会做你想要的。 But there was no directly usable examples in this thread without cruft, so here it is: 但是这个帖子中没有直接可用的例子没有瑕疵,所以这里是:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

There is not way around, you have to use flash. 没有办法,你必须使用闪光灯。 There is a JQuery plugin called jquery.copy that provided cross browser copy and paste by using a flash (swf) file. 有一个名为jquery.copy的JQuery插件,它使用flash(swf)文件提供跨浏览器的复制和粘贴。 This is similar to how the syntax highlighter on my blog works. 这类似于我博客上的语法高亮显示器的工作原理。

Once you reference the jquery.copy.js file all you need to do to push data into the clipboard is run the following: 一旦引用了jquery.copy.js文件,您只需执行以下操作即可将数据推送到剪贴板:

$.copy("some text to copy");

Nice and easy ;) 好,易于 ;)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM