复制到没有Flash的剪贴板
我发现了许多复制到剪贴板的解决scheme,但是它们都是用flash或者网站端的。 我正在寻找方法复制到剪贴板自动,没有闪光和用户端,这是用户脚本,当然跨浏览器。
没有闪光灯,在大多数浏览器中是不可能的。 用户的剪贴板是一个安全相关的资源,因为它可能包含密码或信用卡号码之类的东西。 因此,浏览器正确地不允许Javascript访问它(一些允许它显示用户已经确认的警告,或者带有签名的Javascript代码,但没有一个是跨浏览器的)。
我尝试了闪存解决scheme,我也不喜欢。 太复杂,太慢。 我所做的就是创build一个textarea,把数据放到那里,并使用浏览器的“CTRL + C”行为。
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);
HTML部分:
<textarea id="textArea1"></textarea>
现在,把你想要复制的东西放在“复制到这里复制文本”。 可以是function。 区。 为我工作得很好。 你只需要做一个CTRL + C组合。 唯一的缺点是你将有一个丑陋的textarea显示在你的网站。 如果使用style =“display:none”,则复制解决scheme将不起作用。
clipboard.js刚刚发布到复制到剪贴板,而无需Flash
在这里看到它的行动> http://zenorocha.github.io/clipboard.js/#example-action
终于到了! (只要你不支持Safari或IE8 … -_-)
现在,您可以实际处理不使用Flash的剪贴板操作。 这是相关的文件:
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://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy
在等待 剪贴板API的 Xbrowser支持的时候不耐烦地等待 …
这将在Chrome,Firefox,Edge,IE中运行得非常好
IE只会提示用户一次访问剪贴板。
Safari (编写本文时为5.1) 不支持用于copy/cut
execCommand
function clip( e ) { e.preventDefault(); var cont = $(this).html(), // Or use a custom source Element $txa = $("<textarea />",{val:cont,css:{position:"fixed"}}).appendTo("body").select(), $msg = $("#clip-popup"); if(document.execCommand('copy')) $msg.show().delay(1500).fadeOut(); // CH, FF, Edge, IE else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other $txa.remove(); } $(".clip").on("click", clip);
a{cursor: pointer; color: #F00BA4;} textarea{width:70%; height:100px;} /* CLIP - MESSAGE POPUP */ #clip-popup{ pointer-events: none; position: fixed; z-index:9999; display:none; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font: 2em/1 sans-serif; color: #1CEA6E; opacity: 0.9; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="clip-popup">Copied to clipboard!</div> Click an item to copy: <br> <a class="clip">Lorem</a><br> <a class="clip"><i>ipsum</i></a><br> <a class="clip"><b>dolor</b></a><br> <textarea placeholder="Paste here (or anywhere) to test"></textarea>
您可以使用HTML页面的本地剪贴板。 这允许您将内容复制/剪切/粘贴到HTML页面中,但不能从/到第三方应用程序或在两个HTML页面之间复制/剪切/粘贴。
这是你如何写一个自定义函数来做到这一点(在Chrome和Firefox中testing):
这是演示如何做到这一点的FIDDLE 。
我也会把小提琴粘贴在这里作为参考。
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
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')
将做你想要的。 但没有直接可用的例子在这个线程没有cruft,所以这里是:
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')
没有办法,你必须使用闪光灯。 有一个名为jquery.copy的JQuery插件,它使用flash(swf)文件提供跨浏览器的复制和粘贴。 这与我的博客上的语法突出显示器的工作原理类似。
一旦引用了jquery.copy.js文件,您只需要将数据推送到剪贴板就可以运行以下命令:
$.copy("some text to copy");
很好很容易;)