将当前 URL 复制到剪贴板

Question

不知道为什么今天这对我来说如此困难，但出于某种原因，我似乎无法将当前 URL 复制到剪贴板。总的来说，我正在寻找一种方法不需要创建一些隐藏的文本元素。

这是我目前正在尝试的：

var shareBtn = document.querySelector(".share-button");

shareBtn.addEventListener('click', function(event) {
  var cpLink = window.location.href;
  cpLink.select();

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

当我尝试使用 .select() 解决此问题时，出现此错误： t.select is not a function 所以我不是 100% 确定最好的方法是什么。同样，不使用 jQuery（或任何其他 JS 库）并且不使用某种隐藏的文本字段。

Answer 1

您可以创建一个临时 DOM 元素来保存 URL

不幸的是，剪贴板操作没有标准 API，所以我们只能使用 HTML input 元素来满足我们的需要。这个想法是创建一个输入，将其值设置为当前文档的 URL，select 其内容并执行 copy.

然后我们清理混乱，而不是将输入设置为隐藏并污染 DOM。

var dummy = document.createElement('input'),
    text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);

Answer 2

确实是浏览器处理复制时所需的全部内容，而无需涉及任何剪贴板事件的自定义处理。

但是如果您或某些库挂接到复制事件（例如，window.addEventListener('copy', ...)，然后如果该处理程序依赖于使用 window.getSelection()，则 a 19 year old Firefox issue will bite you. Like MDN says:

It is worth noting that currently getSelection() doesn't work on the content of <textarea> and <input> elements in Firefox, Edge (Legacy) and Internet Explorer.

因此，getSelection() returns 在 HTMLInputElement#select 之后得到 non-null 结果，但没有提供实际选择的内容。通过使用 non-input 元素临时保存 URL:

轻松修复

function copyUrl() {
  if (!window.getSelection) {
    alert('Please copy the URL from the location bar.');
    return;
  }
  const dummy = document.createElement('p');
  dummy.textContent = window.location.href;
  document.body.appendChild(dummy);

  const range = document.createRange();
  range.setStartBefore(dummy);
  range.setEndAfter(dummy);

  const selection = window.getSelection();
  // First clear, in case the user already selected some other text
  selection.removeAllRanges();
  selection.addRange(range);

  document.execCommand('copy');
  document.body.removeChild(dummy);
}

（当没有自定义处理程序挂接到复制事件时，以上内容也将起作用。）

Answer 3

2021 年更新：您可以像这样使用 Clipboard API：

navigator.clipboard.writeText(window.location.href);

Answer 4

window.navigator.clipboard.writeText(textToCopy);

将当前 URL 复制到剪贴板

Copy current URL to clipboard

html

javascript

clipboard

clipboarddata

您可以创建一个临时 DOM 元素来保存 URL