Focus on cloud service provider activities
Notes on website operation and maintenance

Add a copy button to the WordPress program's website

If we see someone on the website adding a copy button to the content, and copying the required content at the same time. How is the function implemented here?

 <div class="copy-box"> <div class="quote"> <p class="quoteText">Contents to be copied</p> <a class="sourceLink" href=" https://laozuo.org ">Links ready to be copied</a> </div> <div class="copy-to-clipboard"> <button class="copy btn" onclick="copyToClipboard()">Copy</button> </div> </div>

The above code is added to the location where the content needs to be displayed.

 <script> function copyToClipboard() { const quote = document.querySelector('.quoteText').textContent; const sourceLink = document.querySelector('.sourceLink').getAttribute('href'); Const copiedText='Text: '+ Quote+' nLink:'+ sourceLink; const tempTextArea = document.createElement('textarea'); tempTextArea.value = copiedText; document.body.appendChild(tempTextArea); tempTextArea.select(); document.execCommand('copy'); document.body.removeChild(tempTextArea); Alert ('Copied! '); } </script>

This is the part of JS. You can set a file separately or add it to our JS file merge.

Vote for you
Domain name host preferential information push QQ group: six hundred and twenty-seven million seven hundred and seventy-five thousand four hundred and seventy-seven Get preferential promotion from merchants.
Like( zero )
Do not reprint without permission: Lao Zuo's Notes » Add a copy button to the WordPress program's website