jquery 不使用Flash复制到剪贴板

hfwmuf9z  于 2023-08-04  发布在  jQuery
关注(0)|答案(8)|浏览(118)

我发现许多解决方案复制到剪贴板,但他们都要么与闪光灯,或为网站方面。我正在寻找方法自动复制到剪贴板,没有闪光灯和用户端,它的userscripts和当然跨浏览器。

jc3wubiy

jc3wubiy1#

没有flash,在大多数浏览器中根本不可能。用户的剪贴板是一个与安全相关的资源,因为它可能包含密码或信用卡号等信息。因此,浏览器正确地不允许JavaScript访问它(一些允许它与警告显示用户已确认,或与签名的Javascript代码,但没有一个是跨浏览器)。

ncecgwcz

ncecgwcz2#

我已经尝试了闪光灯的解决方案,我不喜欢太多。太复杂,太慢。我所做的是创建一个文本区域,将数据放入其中,并使用浏览器的“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部分:
第一个月
现在,把你想复制的内容放在“把要复制的文本放在这里”。可以是一个功能区。对我来说很好。你只需要一个CTRL+C组合。唯一的缺点是,你将有一个丑陋的文本显示在您的网站。如果你使用style=“display:none”,复制解决方案将不起作用。

jmp7cifd

jmp7cifd3#

clipboard.js刚刚发布,无需Flash即可复制到剪贴板
点击此处查看实际应用> http://zenorocha.github.io/clipboard.js/#example-action

h79rfbju

h79rfbju4#

终于来了!(如果您不支持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

emeijp43

emeijp435#

不耐烦地等待Xbrowser支持Clipboard API时...
这将在Chrome,Firefox,Edge,IE中完美运行

IE只会提示用户一次访问剪贴板。
Safari(撰写本文时为5.1)does not support execCommand for copy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = (val) => {  
  const area = document.createElement("textarea");
  area.value = val;
  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", (evt) => {
    evt.preventDefault();
    clip(evt.currentTarget.textContent);
  });
});

个字符
所有浏览器(除了Firefox,据我测试,它只能处理mime类型"plain/text")都没有实现Clipboard API。即,试图读取剪贴板事件在Chrome浏览器使用

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


throws:Uncaught TypeError:非法构造函数
浏览器和剪贴板之间发生的令人难以置信的混乱的最佳资源可以在这里看到(caniuse.com)(→按照 “注解” 下的评论)。
MDN说所有浏览器的基本支持是 "(YES)",这是不准确的,因为人们希望至少API能工作。

v6ylcynt

v6ylcynt6#

您可以使用HTML页面本地的剪贴板。这允许您在HTML页面内复制/剪切/粘贴内容,但不能从/到第三方应用程序或两个HTML页面之间。
下面是如何编写一个自定义函数来实现这一点(在chrome和firefox中测试过):

这里是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();

rslzwgfq

rslzwgfq7#

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')

字符串

icomxhvb

icomxhvb8#

没有办法,你必须使用闪光灯。有一个名为jquery.copy的jQuery插件,它通过使用flash(swf)文件提供跨浏览器复制和粘贴。这与我博客上的语法高亮器的工作方式类似。
一旦你引用了jquery.copy.js文件,你需要做的就是将数据推送到剪贴板中,运行以下命令:

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

字符串
好的,容易的;)

相关问题