There are quite a few posts on this but after spending several hours trying to adapt the solutions that already exist, it’s become clear to me that this is a little bit more complicated.
I’m attempting to create ‘copy to clipboard’ functionality so that our users can copy their serial number with a single click (I managed to achieve this functionality with 2 different solutions) but there’s a major catch.
As the serial number is generated dynamically using a shortcode I cannot place it inside a HTML ‘text’/’value’ field, like so:
<input id="serial" value="[shortcode here]">
as this breaks the shortcode, so it has to be placed inside it’s own div, which I have done like this:
<div id="serial">[shortcode here]</div>
This outputs the shortcode on the page with the direct parent ID of ‘serial’, so the JS I’m using should then select the text from the element ID – #serial.
Unfortunately it doesn’t…
I’ve tried to adapt this method also with no luck:
This one was working with with plain text but not with the shortcode or custom div.
Can anyone provide me with a working clipboard solution as shown in the example above that won’t break the shortcode?