Javascript 复制到剪贴板 - 在 FF、Chrome 中不起作用

copy to clipboard - not working in FF,Chrome

提问by Naju

I am using below mentioned javascript to copy the text to clipboard. Its working in IE, but not working in Firefox and Chrome.

我正在使用下面提到的 javascript 将文本复制到剪贴板。它适用于 IE，但不适用于 Firefox 和 Chrome。

Please advice me,What is wrong?

请指教，有什么问题吗？

   function setDataToclipboard() 
{

var str=document.getElementById("populatedString").value; 

if (window.clipboardData && clipboardData.setData) {
    clipboardData.setData("Text", str);
    alert("Copied!");
}
}

采纳答案by Gomes

w3c clipboard api is been implemented by all the browser http://caniuse.com/#feat=clipboard

w3c 剪贴板 api 已被所有浏览器实现http://caniuse.com/#feat=clipboard

回答by Minko Gechev

The clipboard manipulation is not cross-browser. For cross-browser solution you need flash.

剪贴板操作不是跨浏览器的。对于跨浏览器解决方案，您需要闪存。

Look at this library https://github.com/jonrohan/ZeroClipboard

看看这个库https://github.com/jonrohan/ZeroClipboard

You can use ZeroClipboard like this:

您可以像这样使用 ZeroClipboard：

<button id="my-button" data-clipboard-text="Copy me!">Copy to Clipboard</button>
<script>
    var clip = new ZeroClipboard(document.getElementById('my-button'));
</script>

When you click on the button the text Copy me!will be put into the clipboard.

当您单击按钮时，文本Copy me!将被放入剪贴板。

For further instructions check the library's API https://github.com/jonrohan/ZeroClipboard/blob/master/docs/instructions.md

有关进一步的说明，请查看库的 API https://github.com/jonrohan/ZeroClipboard/blob/master/docs/instructions.md

回答by Dave

I think the window.clipboardData is IE only. Accessing the clipboard is a security concern, and thus cannot be done easily in FF or Chrome.

我认为 window.clipboardData 仅适用于 IE。访问剪贴板是一个安全问题，因此在 FF 或 Chrome 中无法轻松完成。

Please see this thread: How do I copy to the clipboard in JavaScript?

请参阅此主题：如何在 JavaScript 中复制到剪贴板？

回答by Quentin

See the documentation for clipboardData, specifically the section that reads:

请参阅的文档clipboardData，特别是以下部分：

There are no standards that apply here.

这里没有适用的标准。

You are using proprietary Microsoft gubbins, so it shouldn't be expected to work on other browsers.

您正在使用专有的 Microsoft gubbins，因此不应期望它可以在其他浏览器上运行。

See this questionfor cross-browser techniques to access the clipboard.

有关访问剪贴板的跨浏览器技术，请参阅此问题。

There is a draft of a standard for accessing the clipboardbut I'm not aware of any implementations of it in the wild (and canIuse doesn't know of any either).

有一个用于访问剪贴板的标准草案，但我不知道它在野外有任何实现（并且canIuse 也不知道任何一个）。

回答by Jeremy Jao

I had this same problem with Chrome and other browsers recently. However, recently, I found this code works in a contenteditable field in certain browsers:

我最近在 Chrome 和其他浏览器上遇到了同样的问题。但是，最近，我发现此代码在某些浏览器的 contenteditable 字段中有效：

clipboard = e.originalEvent.clipboardData;
clipboard.setData('text/plain', plainData);
clipboard.setData('text/html', htmlData);

NOTE: e in this case is the copy and/or cut event. This event fires and is retrievable in an onCopy()or onCut()action.

注意：在这种情况下，e 是复制和/或剪切事件。此事件触发并可在onCopy()或onCut()操作中检索。

This code is confirmed to work in the latest versions of the following browsers:

此代码已确认可在以下浏览器的最新版本中使用：

• Chrome (PCs/Macs and Android)
• Android 4.4+ WebView (as long as you update from the Play Store) -> good news for Android Devs
• Firefox
• Safari (Mac only)

• Chrome（PC/Mac 和 Android）
• Android 4.4+ WebView（只要您从 Play 商店更新）-> Android Devs 的好消息
• 火狐
• Safari（仅限 Mac）

Internet Explorer seems to work with window.clipboardData.setDatainstead, but keep in mind that the IE clipboard will only accept 'text'and 'url'data.

Internet Explorer 似乎可以使用window.clipboardData.setData，但请记住 IE 剪贴板将只接受'text'和'url'数据。

While the following browsers can access the system clipboard object, these are unable to set data into the clipboard using clipboard.setData:

虽然以下浏览器可以访问系统剪贴板对象，但它们无法使用clipboard.setData以下方法将数据设置到剪贴板中：

• MS Edge
  • gives an UntrustedDragDropobject into the clipboard instead...
  • also, setData returns true... when it doesn't work. setData returns undefined in all other browsers
• Android WebView -> below 4.4
• iOS Safari and WebView - yay iOS!

• 微软边缘
  • UntrustedDragDrop而是将一个对象放入剪贴板...
  • 此外， setData 返回 true ... 当它不起作用时。setData 在所有其他浏览器中返回 undefined
• Android WebView -> 低于 4.4
• iOS Safari 和 WebView - 是的 iOS！

回答by MeSo2

I found that these do not work in Chrome or FF:

我发现这些在 Chrome 或 FF 中不起作用：

type="hidden"

类型=“隐藏”

<input id="e" type="hidden" value="my text to copy to clipboard" />

style="display:none;"

风格=“显示：无；”

<input id="e" type="text" style="display:none;" value="my text to copy to clipboard" />

---

---

trick the browser with this

用这个欺骗浏览器

style="position: absolute; top: -30;"

风格=“位置：绝对；顶部：-30；”

<input id="e" type="text" style="position: absolute; top: -30;" value="my text" />