KeyTable - Support typing "control/c" to copy the data of the selected cell in to the copy buffer

smelcher

The "key" event does not seem to capture the "control" button (test in Chrome). My end goal is to hit "control/C" and have the system put the data of the cell in to my copy buffer. Is this possible?
Thanks

allan

Interesting idea. That isn't something that is built into KeyTable, but support for copy and paste in a cell could be really neat.

The way I'd approach this is:

1. Key event listener for ctrl+c
2. If there is no other text selected on the page and KeyTable has focus, cancel the default event
3. Get the text from the cell using the API (cell().data())
4. Copy to clipboard using execCommand

Allan

smelcher

I'm struggling to capture ctrl+c. When I push the ctrl key it does not fire the key event. Is there another event I should be using?

allan

You need to check the information that is available in the event object. The MDN documentation covers this.

Allan

milanz

A really janky solution:

    var ctrlDown = false,
        ctrlKey = 17,
        cmdKey = 91,
        vKey = 86,
        cKey = 67;

    $(document).keydown(function(e) {
      if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
      if (ctrlDown &&  e.keyCode == cKey) {
        var focused = table.cell( {focused:true} ).data();
        if (focused && !window.getSelection().toString()) {
          e.preventDefault();
          var textArea = document.createElement("textarea");

          // Place in top-left corner of screen regardless of scroll position.
          textArea.style.position = 'fixed';
          textArea.style.top = 0;
          textArea.style.left = 0;

          // Ensure it has a small width and height. Setting to 1px / 1em
          // doesn't work as this gives a negative w/h on some browsers.
          textArea.style.width = '2em';
          textArea.style.height = '2em';

          // We don't need padding, reducing the size if it does flash render.
          textArea.style.padding = 0;

          // Clean up any borders.
          textArea.style.border = 'none';
          textArea.style.outline = 'none';
          textArea.style.boxShadow = 'none';

          // Avoid flash of white box if rendered for any reason.
          textArea.style.background = 'transparent';

          textArea.value = focused;

          document.body.appendChild(textArea);

          textArea.select();

          try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
          } catch (err) {
            console.log('Oops, unable to copy');
          }

          document.body.removeChild(textArea);
        }
      }
    }).keyup(function(e) {
       if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
    });