Question

随着闪存在许多环境（iPhone，Android，IE10等等）的出路上，在任何浏览器中是否会出现任何新的解决方案，允许在没有安装闪存的情况下将信息安全复制到剪贴板？ / p>

到目前为止，我一直在使用ZeroClipboard，但我担心更多没有闪光灯的观众，这种功能会被打破，我希望尽可能不依赖Flash

Answer 1

原因是自动复制到剪贴板可能非常危险，因此除非使用闪存，否则大多数浏览器（IE除外）都会使其变得困难。

与您的ZeroClipboard非常相似，Clipboard LMCButton也使用在后台运行的小型Flash脚本。

一个常见的解决方案是：

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

我从Jarek Milewski找到的其他人asked the question here

*是的我找到了一个IE解决方案，但在大多数现代浏览器中都不行check here。

Answer 2

我知道这个答案有点晚了，但现在有一个新的现代替代ZeroClipboard（基于Flash）。 {{3}}是 2kB纯JavaScript 备选方案，具有无依赖关系。

Answer 3

我创建了一个名为clip-j的纯JavaScript解决方案。 Here它是。基本上它的作用是利用document.execCommand('copy');和其他几个命令来使它看不到任何东西。这是代码：

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}

Answer 4

您可以查看this blog post，深入讨论如何在HTML5中使用剪贴板。不幸的是，您仍然无法在点击时移植到剪贴板。但是，对于chrome和firefox，你可以创建一个浏览器扩展，它可以让你的网站访问剪贴板，我相信IE会让你复制到剪贴板，但会提示用户授予权限。

<强>更新：

据此：https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41 +，Chrome 42+和IE 9+支持execCommand的复制命令。对于firefox和chrome，它只有在用户操作（例如点击）触发时才会起作用，而对于IE，它会给用户一个警告对话框，询问他们是否有权复制到剪贴板。

Answer 5

要使用execCommand，您必须首先选择（）页面上的某些内容，这样您就不必复制最后放入剪贴板的内容。使用此函数，我将输入文本框的id传递给函数并选择（）它，然后执行复制命令。无需添加侦听器或进一步使代码复杂化。如果未启用或不支持，document.execCommand（）将返回false，因此您可以使用window.prompt作为备份方法。

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

使用标准的“a”锚标签和onclick =“copyToClipboard（'some_id'）”

Answer 6

this question有很好的答案，我选择使用此代码段：

import { Component } from '@angular/core';
import { TutorialComponent } from './tutorial/tutorial.component';

@Component({
   selector: 'app-root',
   template: `{{ title }} <br/>
              <app-tutorial></app-tutorial>`,
   styleUrls: ['./app.component.css']
})  

export class AppComponent {
   public title = 'My Angular2 Login App'; //define as public 
}

但是，如果页面上有bootstrap-select，function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); }行会抛出错误：

窗口小部件只能处理选择元素

您可以使用$temp.val($(element).text()).select()代替jQuery documentation for .select()中所述，如下所示：

.trigger('select')

HTML5替代基于闪存的ZeroClipboard，用于安全地将数据复制到剪贴板？

6 个答案: