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

Question

I'm html-formatting my teacher union's new contract for our member website. We'd like to have a link icon (or the words 'copy link') after different sections (that have the name attribute). This will allow members to copy links to different sections to his/her clipboard.. and then direct others to specific sections of our very long contract. Can I do this with html code?

Here's my progress:

<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>

So what is the mark up for the section? Did you try anything? — epascarello, Apr 07 '20 at 20:38
This is what I have been able to put together so far. But putting lots of these input boxes after every section is not a great option. — bradfdlad, Apr 07 '20 at 20:42
Please [edit] the question to include what you have so far. Comments are not a good medium for code. — Heretic Monkey, Apr 07 '20 at 20:44
As long as it's not too long, Ctrl-V. Then highlight the code and press Ctrl-K (or press the button with `{ }` on it). — Heretic Monkey, Apr 07 '20 at 20:47
Does this answer your question? [Linking to a specific part of a web page](https://stackoverflow.com/questions/15481911/linking-to-a-specific-part-of-a-web-page) — Heretic Monkey, Apr 07 '20 at 20:49
No, I want the user to be able to copy a link to a page section onto his/her clipboard. — bradfdlad, Apr 07 '20 at 20:52
Sorry, I wasn't clear.. I want the user to be able to click on a link icon next to a section on a webpage. Clicking this icon would then copy the URL to this section onto the user's clipboard. — bradfdlad, Apr 07 '20 at 20:58
Here's an example: 5.6 TEACHERS WORKING ON LESS THAN A FULL-TIME BASIS — bradfdlad, Apr 07 '20 at 21:03

score 3 · Accepted Answer · answered Apr 07 '20 at 21:30

So add querySelectorAll to select all the links you want to add it to. You might need to refine it if it selects too many. And add the item to click and copy it.

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: '\2693';
  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>

That's perfect! Thank you! – bradfdlad Apr 08 '20 at 00:51 — bradfdlad, Apr 08 '20 at 00:51

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

1 Answers1