添加 'link' 图标以复制网页上的网址

Question

我正在 html- 为我们的会员网站格式化我的教师工会的新合同。我们希望在不同的部分（具有名称属性）之后有一个 link 图标（或单词 'copy link'）。这将允许成员将 links 复制到不同的部分到 his/her 剪贴板.. 然后将其他人引导到我们非常长的合同的特定部分。我可以用 html 代码做到这一点吗？

这是我的进度：

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

<input size="20" type="text" value="https://www.example.com#ARTICLE2" id="myInput"><button onclick="myFunction()">Copy text</button>

Answer 1

因此，将 querySelectorAll 添加到 select 您要将其添加到的所有链接。如果 select 太多，您可能需要对其进行优化。并添加项目以单击并复制它。

function copyIt(text) {
  var input = document.createElement('input');
  input.setAttribute('value', text);
  document.body.appendChild(input);
  input.select();
  var result = document.execCommand('copy');
  document.body.removeChild(input);
  return result;
}



document.querySelectorAll('a[name]').forEach(function (anchor) {
  anchor.addEventListener("click", function (){
    var page = window.location.href.replace(/#.*$/, '')
    copyIt(page + '#' + anchor.name);
  });
});

a[name]::after {
  content: '93';
  cursor: pointer;
}

<a name="ARTICLE5-1"></a>1
<p>a</p>
<a name="ARTICLE5-2"></a>2
<p>b</p>
<a name="ARTICLE5-3"></a>3
<p>c</p>
<a name="ARTICLE5-4"></a>4
<p>d</p>
<a name="ARTICLE5-5"></a>5
<p>e</p>

添加 'link' 图标以复制网页上的网址

Adding a 'link' icon to copy URLs on a webpage

html

url

anchor