A simple "copy this code" button in JavaScript

Next to all the code samples on this blog is a little "copy" button. That makes it easier to grab any of the code I've shared.

The HTML and JS is delightfully simple:

1<button
2    onclick="navigator.clipboard.writeText(
3        this.parentNode.getElementsByTagName('code')[0].textContent
4    );" 
5    title="Copy code"
6>⧉</button>

The navigator.clipboard.writeText needs a user interaction to work - so it is tied to a click on the button.

It takes some plaintext content. But how to get that content? My code samples look like this:

1<pre itemscope itemtype=https://schema.org/SoftwareSourceCode translate=no>
2    <button onclick="navigator.clipboard.writeText( this.parentNode.getElementsByTagName('code')[0].textContent );">⧉</button>
3    <span>
4        <img alt height=32 src=html.svg width=32>
5        <span itemprop=programmingLanguage> HTML</span>
6    </span>
7    <code itemprop=text>[…]</code>
8</pre>

There are various ways I could get that <code> element:

• Give it a unique ID (but that might clutter the code, or conflict with something else).
• Use this.nextSibling.nextSibling (but that might not work if the layout changes).
• Use this.lastChild.textContent (but, again, depends on the layout staying the same).
• Select based on itemprop (could make the code a bit longer).
• Complex filtering on a NodeList (urgh).

None of those are particularly bad per se, so I've chosen the method which makes most sense to me.

You can read more about my Classless Design, and how I use metadata to identify programming languages, including whether HTML's code blocks be translated.

To let people know that it has worked, I've added a little popover.

Every piece of code has it's own dialog element with a unique id:

1<dialog
2    id=pop
3    popover=hint>Copied JS to 📋</dialog>

No JavaScript is required to show the popover when the copy button is pressed:

1<button popovertarget=pop popovertargetaction=show>

Closing the the popover hint doesn't require JS; clicking outside it will dismiss it. But a little scrap of JS on the button's onclick will make it disappear after a few seconds:

1setTimeout(
2    function() {
3        document.getElementById("pop").hidePopover();
4    }, 
53000);

Positioning the popup so it is in proximity to the button also requires CSS - no JS.

1dialog[popover] {
2    inset: unset;
3    position: absolute;
4    padding: .5em;
5}

If CSS isn't loaded, the default is to place it in the middle of the screen.

OK, that started out simple but got a bit more complex. Sorry!