Copying and range selection programmatically in Javascript (with clipboard.js)

Question

Context

Real application of free software (GPLv3) (arguing this issue) that I code, it MELT monitor on github (FWIW, I AT the commit am 56a83d358d3966eddb55 ... on February 11 ^th 2016). This is on Linux / x86_64 / Debian, Firefox / 44, JQuery-2.2.0, JqueryUI 1.11.4, clipboard.js 1.5.8 ....

A more open (but without code) related question was omitted by Programmers. So I made a JsFiddle example for this very question, but the JsFiddle example is probably very wrong.

I have a (dynamically generated) HTML document with some <span>-s class='momitemref_cl', such as <span class='momitemref_cl'>this</span>etc. (the internal content of such spaces is always one word, for example this, actually some variable name or identifier in some of my DSLs). My goal is to create a dynamically created menu for each such interval, to enable some operations on them, in particular: hilight each appearance of this word and copy and select the word in the browser and the clipboard on the desktop.

Here are a lot of questions about copying to the clipboard in Javascript, like this . Some of them mention Zeno Rocha clipboard.js , which I am trying to use.

Explanation Code

JsFiddle: JQueryUI

// 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'>* <i>" + name + "</i> *</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;
}

, //// what should go here?; , :

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

AFAIU , , , (, ), .

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

( ), /// some code is missing here probably .

, , (//// what should go here?....) (/// some code is missing here probably....)

MVCE JsFiddle

, clipboard.js JQueryUI span ??

---

, , , , contextmenu ( , span -s class='momitemref_cl'?)

, MELT monitor ( JsFiddle...) CSS mom_itemref_cl mom_itemval_cl, .

---

PS. JsFiddle . , https://jsfiddle.net/bstarynk/g2notLd7/132/

NB. , Firefox Chrome.

Answer 1

Clipboard.js , . <li>Copy</li> mommenu_cl, , momitemref_cl. clipboard.js Copy 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");
  ...
});

, script, $clipboardh, false. , , , .

/// javascript code
var $clipboardh = false;

make_menu <li>Copy</li> a 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;

.

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, , , , "".