使用javascript将自定义json对象复制到剪贴板答案

【问题标题】：Copying custom json object to clipboard with javascript使用javascript将自定义json对象复制到剪贴板
【发布时间】：2015-11-07 02:37:06
【问题描述】：

我正在使用 HTML5 + javascript 开发一个共享画布。我正在开发复制/粘贴功能，使用 Ctrl+C、+X、+V 没有问题，但我也想添加提供相同功能的典型按钮（主要是为了能够复制/粘贴在平板电脑中）。

管理标准事件的代码非常简单：

window.addEventListener("copy", copyFunc);

...

copyFunc(e){
  if (BDKanvasInstance.selection !== null){
    var data = BDKanvasInstance.selection.serialize();
    var jsonData = JSON.stringify(data);
    e.clipboardData.setData('application/json', jsonData);
    e.preventDefault();
  }
}

但我必须通过按钮访问剪贴板数据...

copyBtn.addEventListener("click", copyBtnFunc);

copyBtnFunc(e){
  /* Any way to access clipboardData or to trigger the standard copy command? */
}

我见过几种解决方案，包括创建文本区域、插入文本、以编程方式选择文本并使用“execCommand('copy')”，但这不会复制“application/json”类型的文本...

有什么解决办法吗？在计算机上使用键盘快捷键是可以的，但在平板电脑上使用时它们不是解决方案...

谢谢！

【问题讨论】：

为了能够在没有来自用户的初始“复制”事件的情况下修改剪贴板数据，您需要 Flash（This plugin 做得非常好）。但是iOS没有Flash。您只针对 Android 设备吗？
我的目标是任何 HTML5 浏览器...这就是我不想使用 Flash 的原因，因为它不是跨平台的。谢谢！
好的，那么，我认为没有 Flash 就无法做到这一点（我过去对此进行了大量研究）。您是否打算在同一网站上复制和粘贴？如果是这样，您可以使用 cookie 或 localstorage 作为备份计划（即：当您点击“复制”按钮时，将您想要的值存储在 cookie 中，然后，当您点击另一个“粘贴”按钮时，插入数据从 cookie 到任何你想要的地方。）
是的，如果这一切都发生在同一个页面上，你可以像你一样使用一个简单的 JS 变量（cookie 方法只有在你想跨多个页面复制数据时才相关）。

标签： javascript android json html canvas

【解决方案1】：

一切都在同一个页面上完成，所以我已经完成了：

window.addEventListener("copy", copyFunc);

...

copyFunc(e){
  if (BDKanvasInstance.selection !== null){
    var data = BDKanvasInstance.selection.serialize();
    if (e && e.clipboardData)
    {
      var jsonData = JSON.stringify(data);
      e.clipboardData.setData('application/json', jsonData);
      e.preventDefault();
    } else {
      internalClipboard = data;
    }
  }
}

copyBtn.addEventListener("click", copyBtnFunc);

copyBtnFunc(e){
  copyFunc(null);
}

与三个动作（复制/剪切/粘贴）类似。按钮从它们的处理程序调用函数，参数为空。按钮有一个“剪贴板”，快捷方式有另一个。很脏，但可以解决问题...

谢谢！

【讨论】：