Copy div text content using javascript/jQuery

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:

From the Roll Your Own section:

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?

Read more here: Copy div text content using javascript/jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *