Question

上下文

我正在编码的真正的自由软件（GPLv3）应用程序（激发这个问题）是github上的MELT monitor（FWIW，我是在2月11日^{th }的提交56a83d358d3966eddb55... sup>，2016）。它位于Linux / x86_64 / Debian，Firefox / 44，JQuery-2.2.0，JqueryUI 1.11.4，clipboard.js 1.5.8 ....}

更加开放（但没有代码）related question被低估了程序员。所以我为这个问题做了一个JsFiddle example，但是JsFiddle的例子可能非常错误。

我有一个（动态生成的）HTML文档，其中包含个class='momitemref_cl'个this等this等...（此类跨度的内部内容始终是单个单词// make a menu for the given span function make_menu(spa) { console.log("make_menu spa=", spa); var name = $(spa).text(); mom_menuitemcount++; var menuid = "menuid_" + mom_menuitemcount; console.log("make_menu name=", name, " menuid=", menuid); $maindiv.after("<ul class='mommenu_cl' id='" + menuid + "'>" + "<li class='ui-state-disabled'>* " + name + " *</li>" // the text inside the following <li> matters + "<li>Hilight</li>" + "<li>Copy</li>" + "</ul>"); var mymenu = $('#' + menuid); mymenu.menu({ select: function(ev, ui) { var uitem = ui.item; var utext = uitem.text(); console.log("mymenu-select ev=", ev, " ui=", ui, " name=", name, " uitem=", uitem, " utext=", utext); switch (utext) { case "Hilight": $maindiv.find(".momitemref_cl").each(function(ix, el) { var etext = $(el).text(); console.log("hilighting el=", el, " etext=", etext); if (etext == name) { $(el).toggleClass("momhilight_cl"); } }); break; case "Copy": //// what should go here? break; }; setTimeout(200, destroy_menu); }, position: { my: "left top", at: "bottom left", of: spa } }); mom_menuitem = mymenu; console.log("make_menu spa=", spa, " mymenu=", mymenu); return mymenu; }，实际上是某些DSL中的变量名称或标识符）。我的目标是为每个此类跨度设置一个 动态生成的菜单，以便在其上启用一些操作，特别是： hilight 该词的每次出现，以及 copy＆amp;选择这个词到浏览器和桌面的剪贴板。

这里有很多关于在Javascript 中复制到剪贴板的问题，例如this一个。他们中的一些人提到了我试图使用的Zeno Rocha clipboard.js。

带解释的代码

解释一些JsFiddle：我正在使用

创建JQueryUI menu

//// what should go here?

在上面的代码中，我不知道放在uitem.select(); document.execCommand('Copy');中的内容;也许它可能类似于：

$clipboardh = new Clipboard(".momitemref_cl", {
  text: function (trig) {
    console.log("clipboard text trig=", trig);
    /// some code is missing here probably
  };
});

但是AFAIU没有按预期工作，我觉得剪贴板操作需要用户事件（例如鼠标点击或按下）来触发它们。

剪贴板初始化为

/// some code is missing here probably

我猜（但我不确定）//// what should go here?应该返回相关范围的文本值。

问题

所以我不知道如何将span的内容复制到剪贴板（/// some code is missing here probably ....）以及如何将其文本放入剪贴板（clipboard.js ....）

完整的MVCE代码是this JsFiddle

换句话说，如何使用JQueryUI菜单项中的span将contextmenu的内容复制到浏览器的剪贴板？

也许整个方法都是错误的，也许我应该使用span（但是，如何仅针对class='momitemref_cl'的{{1}}来定制它？）

为了让事情变得更复杂，我实际上已经在MELT monitor（但不在this JsFiddle ...）两个CSS类mom_itemref_cl＆amp; mom_itemval_cl我想表现得同样如此。

PS。我在这里复制代码时搞砸了JsFiddle。我更新了， https://jsfiddle.net/bstarynk/g2notLd7/132/

NB。我只对最近的Firefox＆amp;铬。

Answer 1

Clipboard.js需要附加到触发复制事件的元素。在您的情况下，这是<li>Copy</li>菜单中的mommenu_cl元素，您可以在右键单击momitemref_cl时动态创建该元素。创建菜单本身时，您可以动态地将clipboard.js附加到复制li。在销毁菜单时，您还必须销毁剪贴板。

首先，让我们在第87行修正你更新的小提琴中的拼写错误：

curmenu[0].stle.left = Math.round(ev.pageY) + 5;

然后，从DOM的准备处理程序中删除剪贴板，我们将其移至make_menu函数：

$(document).ready(function() {
  $maindiv = $('#maindiv_id');
  // no clipboard initialization here
  console.log("our document ready function");
  ...
});

接下来，在您的脚本顶部，您首先声明$clipboardh，将其初始化为false。稍后，您将检查以确保您只附加剪贴板，以防它当前未连接。

/// javascript code
var $clipboardh = false;

在make_menu功能中，为<li>Copy</li>元素添加class="copy"元素，以便您可以轻松地将clipboard.js附加到该元素，并将data-clipboard-text属性设置为该值你希望在单击元素时复制clipboard.js。

由于name变量包含您要复制的文本值，因此您的菜单将如下所示：

$maindiv.after("<ul class='mommenu_cl' id='" + menuid + "'>" +
        "<li class='copy' data-clipboard-text='" + name + "'>Copy</li>" + 
    "</ul>");

接下来，在make_menu函数中的此代码之后，只有在尚未附加的情况下才附加clipboard.js：

if ($clipboardh === false){
  console.log("creating the clipboard");
  $clipboardh = new Clipboard('.copy');

  // some optional event handlers for debugging
  $clipboardh.on('success', function(e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);

      e.clearSelection();
  });

  $clipboardh.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
  });
}

最后，您需要确保在销毁菜单时销毁剪贴板，方法是将其添加到destroy_menu函数的底部：

$clipboardh.destroy();
$clipboardh = false;

You can find a working fiddle here.

Answer 2

从剪贴板复制IE以外的任何内容都需要在可编辑元素上进行。处理此问题的最常用方法是创建隐藏的文本区域，将内容放在文本区域中，然后

textArea.select();
document.execCommand('Copy');

对于IE，您可以使用

if(window.clipboardData){
    window.clipboardData.setData('Text',
        uitem.innerText);
}

我写了一篇非常广泛的文章，解释了这一切是如何运作的，我在GitHub上有一个带有结果代码的项目。

http://blog.dmbcllc.com/cross-browser-javascript-copy-and-paste/

我花了几个月的时间来通过搜索Google来解决所有可用的冲突建议，因为你这样做会随着浏览器的“成熟”而不断变化。

复制＆amp;在Javascript中以编程方式选择范围（使用clipboard.js）

上下文

带解释的代码

问题

2 个答案: