使用 javascript 复制永久链接

Question

我的网站url 是http://localhost:4200/reader-main。我希望在单击anchor 链接时复制它。复制的链接可以粘贴到任何地方。
代码：
HTML：

<div class="row permalink">
      <a id="copyPermalink" class="copyLink" href="" (click)="copyToClipboard($event)" aria-label="Copy Permalink">Copy Permalink</a>
    </div>  

Javascript：

copyToClipboard(event: any): void {
    const copyUrl = document.querySelector('copyLink');
    window.getSelection();
    try {
      const successful = document.execCommand('copy');
      const message = successful ? 'Successful' : 'Unsuccessful';
      console.log(copyUrl);
      alert(message);
    } catch (err) {
      console.log('Not able to copy', err);
    }
    return false;
  }  

但在上面的代码中，console.log(copyurl) 返回 null。并且 URL 没有被复制。如何解决？

Answer 1

您可以为页面上的所有锚标签添加事件监听器，并将点击事件附加到函数copyToClipboard()。

---

let a = document.querySelectorAll("a");

for (let i = 0; i < a.length; i++) {
  a[i].addEventListener("click", function(e) {
    e.preventDefault();
    copyToClipboard(this);
  });
}

function copyToClipboard(anchor) {
  try {
    let input = document.createElement('input');
    input.type = "text";
    input.setAttribute("value", window.location.href);
    input.id = "test";
    document.body.appendChild(input);
    
    let inputEl = document.getElementById("test");
    inputEl.focus();
    inputEl.setSelectionRange(0, inputEl.value.length);
    
    const successful = document.execCommand('copy');
    document.body.removeChild(inputEl);

    const message = successful ? 'Successful' : 'Unsuccessful';
    console.log(anchor);
    alert(message);
    console.log(window.location.href);
  } catch (err) {
    console.log('Not able to copy', err);
  }
}

<div class="row permalink">
  <a id="copyPermalink" class="copyLink" href="" aria-label="Copy Permalink">Copy Permalink</a>
</div>

但在上面的代码中，console.log(copyurl) 返回 null。并且 URL 没有被复制。如何解决？

在这条指令const copyUrl = document.querySelector('copyLink'); 中，您在.copyLink 处缺少.

---