javascript copy with execCommand

Question

I wanna copy some content out of the dataset from an html element.

HTML Code

<p id="web-password-@{{ id }}" data-password="@{{ password }}" 
data-state="0">@{{ hidePassword }}</p>

<button class="mdl-button mdl-js-button mdl-button--icon">

    <i data-event="copy" data-obj="util" data-target="web-password-@{{ id }}" 
    class="material-icons clickable-icon">content_copy</i>

</button>

Copy Method

The method is beeing called through the data-event and data-obj attributes.

copy (args) {

    let copyText = document.getElementById(args.target).dataset.password;

    console.log(copyTest); // output: specific password

    document.execCommand("Copy");
}

Like this it do not copy the content to the clipboard. Somebody see an error?

UPDATE

The following code works for the actual textContent of the htmlelement.

But I need to copy the value from data-password attribute

let range = document.createRange();

let selection = window.getSelection();

let node = document.getElementById(args.target);

range.selectNodeContents(node);

selection.removeAllRanges();

selection.addRange(range);

document.execCommand("copy");

Possible solution

So I write the value inside a hidden input field, select it, copy it and delete the temporary hidden input field again.

But it copies nothing.?

let copyValue = document.getElementById(args.target).dataset.password;

document.body.insertAdjacentHTML('beforeend', `<input hidden id="temp-copy" value="${copyValue}">`);

let copyText = document.getElementById('temp-copy');

copyText.select();

document.execCommand("copy");

copyText.remove();

Answer 1

Solution

UPDATE

Nicer solution.

copyPassword (args) {

    function handler(event) {

        event.clipboardData.setData('text/plain', document.getElementById(args.target).dataset.password);

        event.preventDefault();

        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);

    document.execCommand('copy');
}

Alternative. This also works.

let range = document.createRange();

let selection = window.getSelection();

let password = document.getElementById(args.target).dataset.password;

document.body.insertAdjacentHTML('beforeend', `<p id="temp-copy">${password}</p>`);

let node = document.getElementById('temp-copy');

range.selectNodeContents(node);

selection.removeAllRanges();

selection.addRange(range);

document.execCommand("copy");

document.getElementById('temp-copy').remove();

Answer 2

Copy command copies the current selection to the clipboard. Therefore you need to select the text in your input before copying:

let input = document.getElementById(args.target);
input.select();
document.execCommand("Copy");

You may also want to check the return value of the execCommand which is false if the command is not supported or enabled.

UPDATE

If a node you're trying to copy is not an input or textarea you can select it's text like this:

var range = document.createRange();
var selection = window.getSelection();
range.selectNodeContents(document.getElementById('p'));

selection.removeAllRanges();
selection.addRange(range);

source

Answer 3

Please refer to this answer by Dean Taylor: https://stackoverflow.com/a/30810322/2879085

Here is a working example:

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a flash,
  // so some of these are just precautions. However in IE the element
  // is visible whilst the popup box asking the user for permission for
  // the web page to copy to the clipboard.
  //

  // 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 = text;

  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);
}


var copyPasswordBtn = document.querySelector('button.mdl-button.mdl-js-button.mdl-button--icon');
copyPasswordBtn.addEventListener('click', function(event) {
  var password = document.getElementById('web-password').dataset.password
  console.log(password)
  copyTextToClipboard(password);
});

<p id="web-password" data-password="my-secret-password" 
data-state="0"></p>

<button class="mdl-button mdl-js-button mdl-button--icon">

    <i data-event="copy" data-obj="util" data-target="web-password" 
    class="material-icons clickable-icon">content_copy</i>

</button>

<p>
  <textarea cols="50" rows="10">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</p>