javascript - 如何在JavaScript复制到剪贴板?

  显示原文与译文双语对照的内容

将文本复制到剪贴板的最佳方式是什么? ( multi-browser )

我尝试过:


function copyToClipboard(text) {
 if (window.clipboardData) {//Internet Explorer
 window.clipboardData.setData("Text", text);
 } else { 
 unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
 const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper); 
 clipboardHelper.copyString(text);
 }
}

但在 IE 中它提供了一个语法错误。 在 Firefox 中,它表示 unsafeWindow is not defined

没有 Flash: 编辑一个好的技巧 如何访问用户的剪贴板

时间:

自动复制到剪贴板可能是危险的,因此大多数浏览器( 除了 IE ) 都会很困难。 我个人使用以下简单技巧:


function copyToClipboard(text) {
 window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

用户显示提示框,其中已经选定要复制的文本。 现在是需要能够按 Ctrl C + 输入 ( 关闭框) --,瞧 !

现在,剪贴板复制操作是安全的,因为用户是手工执行的。 当然,在所有浏览器中都可以使用。

如果你想要一个非常简单的解决方案( 集成不到 5分钟),并且它看起来很不错,那么Clippy是一个很好的替代方案。

Clippy

它是由Github的一个联合创始人编写的。 示例 Flash 在下面嵌入代码:


<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
 width="110"
 height="14"
 id="clippy"> 
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param NAME="FlashVars" value="text=#{text}">
<param name="bgcolor" value="#{bgcolor}">
<embed src="/flash/clippy.swf"
 width="110"
 height="14"
 name="clippy"
 quality="high"
 allowScriptAccess="always"
 type="application/x-shockwave-flash"
 pluginspage="http://www.macromedia.com/go/getflashplayer"
 FlashVars="text=#{text}"
 bgcolor="#{bgcolor}"
/>
</object>

记住用需要复制的文字替换 #{text},并使用颜色替换 #{bgcolor}

从网页读取和修改剪贴板会提高安全性和隐私问题。 但是,在 IE 中,它是可以做到的。 我找到了这个示例 Fragment:


<script type="text/javascript">
 function select_all(obj) {
 var text_val=eval(obj);
 text_val.focus();
 text_val.select();
 if (!document.all) return;//IE only
 r = text_val.createTextRange();
 r.execCommand('copy');
 }
</script>
<input value="http://www.sajithmr.com"
 onclick="select_all(this)" name="url" type="text"/>

我最近写了一篇关于这个问题的技术博客博文

将纯文本复制到剪贴板相对简单,假设你希望在系统复制事件( 用户按ctrl-c或者使用菜单)的系统复制事件。


var isIe = (navigator.userAgent.toLowerCase().indexOf("msie")!= -1 
 || navigator.userAgent.toLowerCase().indexOf("trident")!= -1);

document.addEventListener('copy', function(e) {
 var textToPutOnClipboard ="This is some text";
 if (isIe) {
 window.clipboardData.setData('Text', textToPutOnClipboard); 
 } else {
 e.clipboardData.setData('text/plain', textToPutOnClipboard);
 }
 e.preventDefault();
});

在系统复制事件中不在剪贴板上放置文本要困难得多。 它看起来像一些这些其他答案参考通过 Flash 方法可以做到这一点,它是唯一的它( 据我所知) 跨浏览器的方法来做。

除此之外,在browser-by-browser基础上还有一些选项。

这是 IE 中最简单的一种,你可以在任何时候通过Javascript访问clipboardData对象:


window.clipboardData

( 当你试图在系统剪切,复制或者粘贴事件之外执行这里操作时,IE 会提示用户授予web应用程序剪贴板权限。)

在 Chrome 中,你可以创建一个 Chrome 扩展,它将为你提供剪贴板权限 ( 这是我们为Lucidchart做的) 。 然后,对于安装了你的扩展的用户,你只需要自己触发系统事件:


document.execCommand('copy');

看起来 Firefox 有的一些选项,允许用户向某些站点授予访问剪贴板的权限,但我没有亲自尝试任何一个。

我发现了以下解决方案:

在键下处理程序创建"预先"标记。 我们将内容设置为复制到这个标记,然后在这个标记上做一个选择,然后在处理程序中选择 return true 。 这将调用 Chrome的标准处理程序并复制选中的文本。

如果你需要,可以为恢复以前选择的函数设置超时时间。 我在Mootools上的实现:


 function EnybyClipboard() {
 this.saveSelection = false;
 this.callback = false;
 this.pastedText = false;

 this.restoreSelection = function() {
 if (this.saveSelection) {
 window.getSelection().removeAllRanges();
 for (var i = 0; i <this.saveSelection.length; i++) {
 window.getSelection().addRange(this.saveSelection[i]);
 }
 this.saveSelection = false;
 }
 };

 this.copyText = function(text) {
 var div = $('special_copy');
 if (!div) {
 div = new Element('pre', {
 'id': 'special_copy',
 'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
 });
 div.injectInside(document.body);
 }
 div.set('text', text);
 if (document.createRange) {
 var rng = document.createRange();
 rng.selectNodeContents(div);
 this.saveSelection = [];
 var selection = window.getSelection();
 for (var i = 0; i <selection.rangeCount; i++) {
 this.saveSelection[i] = selection.getRangeAt(i);
 }
 window.getSelection().removeAllRanges();
 window.getSelection().addRange(rng);
 setTimeout(this.restoreSelection.bind(this), 100);
 } else return alert('Copy not work. :(');
 };

 this.getPastedText = function() {
 if (!this.pastedText) alert('Nothing to paste. :(');
 return this.pastedText;
 };

 this.pasteText = function(callback) {
 var div = $('special_paste');
 if (!div) {
 div = new Element('textarea', {
 'id': 'special_paste',
 'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
 });
 div.injectInside(document.body);
 div.addEvent('keyup', function() {
 if (this.callback) {
 this.pastedText = $('special_paste').get('value');
 this.callback.call(null, this.pastedText);
 this.callback = false;
 this.pastedText = false;
 setTimeout(this.restoreSelection.bind(this), 100);
 }
 }.bind(this));
 }
 div.set('value', '');
 if (document.createRange) {
 var rng = document.createRange();
 rng.selectNodeContents(div);
 this.saveSelection = [];
 var selection = window.getSelection();
 for (var i = 0; i <selection.rangeCount; i++) {
 this.saveSelection[i] = selection.getRangeAt(i);
 }
 window.getSelection().removeAllRanges();
 window.getSelection().addRange(rng);
 div.focus();
 this.callback = callback;
 } else return alert('Fail to paste. :(');
 };
 }

使用方法:


enyby_clip = new EnybyClipboard();//init 

enyby_clip.copyText('some_text');//place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
 alert(pasted_text);
});//place this in CTRL+V handler and return true;

在粘贴时创建文本并使用相同的方式。

这个解决方案可以用来创建完全 跨浏览器 解决方案而不用 Flash 。 它在FF和 Chrome 中工作。

其他方法将纯文本复制到剪贴板。 在 IE following.只有,来复制 HTML ( IE,你可以将结果粘贴到WSIWYG编辑器中),你能做 这与其他方法根本不同,因为浏览器实际上会选择内容。


//create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
 contentEditable = true;
} 
editableDiv.appendChild(someContentElement); 

//select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select(); 
r.execCommand("Copy");

//deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();

...