Javascript 复制到剪贴板只有在我有断点时才有效

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

你能试试这个从 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 2

您的代码运行良好。我没有删除您的任何代码，我不知道您要做什么，但您可能需要它来做某事。重要的是要强调剪贴板代码必须运行在用户执行操作（例如单击按钮）后，这是避免 trolling/improve 安全的措施。

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 3

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

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 复制到剪贴板只有在我有断点时才有效

Javascript copy to clipboard only works if I have a breakpoint

javascript

clipboard

copy

breakpoints