Question

我有按下按钮时会调用的函数：

function copyCredentials(elementId) {
  var el = document.createElement('textarea');
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);

  el.value = document.getElementById(elementId).innerHTML;

  var selected = document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
  el.select();
  document.execCommand('copy');
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
}

仅当我放置断点时，此代码才有效。在正常使用中，它不会复制任何东西... 这里有什么收获？

Answer 1

您的代码可以正常工作。我没有删除任何代码，我不知道您要执行的操作，但是您可能需要它来执行某些操作。重要的是要强调剪贴板代码必须在用户执行操作（例如单击按钮）之后运行，这是避免巨魔/提高安全性的一种措施。

function copyCredentials(elementId) {
  var el = document.createElement('textarea');
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);

  // note that you need to get .value instead
  // of .innerHTML if target is input type
  el.value = document.getElementById(elementId).innerHTML;

  var selected = document.getSelection().rangeCount > 0
          ? document.getSelection().getRangeAt(0)
          : false;
           
  el.select();
  // returns boolean
  var successfulCopy = document.execCommand('copy');
  
  if (!successfulCopy) {
    alert('Something went wrong or no browser support!').
    return;
  }

  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
}

document.getElementById('button').addEventListener('click', e => {
  copyCredentials('text');
});

<b>Text to paste:</b>
<div id="text">
  Hello World
</div>

<br />
<br />

<button id="button">Copy</button> <br />

<div>
  <b>Paste here:</b> <br />
  <textarea id="output" rows="10" cols="50"></textarea>
</div>

Answer 2

您可以尝试使用此功能从textarea复制值吗？

function copyCredentials(elementId) {
  const value = document.getElementById('textarea_id').value;
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('value', value);
  document.body.appendChild(hiddenInput);
  hiddenInput.select();
  document.execCommand('copy');
  document.body.removeChild(hiddenInput);
}

<textarea id="textarea_id"></textarea>

<button onclick="copyCredentials()">CLICK</button>

Ps。我删除了rangeCounts，因为我不确定为什么在那里需要它们。是什么原因呢？

Answer 3

我尝试了另一种方法。而不是创建新元素，而是从原始元素中获取文本（请注意，其内容是<code>标签内的<pre>标签）：

function copyCredentials(elementId) {
  var range;
  var selection;
  var el = document.getElementById(elementId);

  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(el);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();
    range = document.createRange();
    range.selectNodeContents(el);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  document.execCommand('copy');
  if (selection) {
    selection.removeRange(range);
  }
}

它有效！！！ :-D

仅在有断点的情况下才能将Javascript复制到剪贴板

3 个答案: