I need a copy-to-text button using a font awesome icon in a div in wordpress.
I do not want any alerts. Just a simple click.
<div class="btcTXT">text</div>
<div id="cpy" class="cpy"><i class="far fa-copy"></i></div>
I am a novice so please tell me the steps I need to do.
Thank you in advance.
Give your div an id first, like so:
<div class="btcTXT" id="your-div-id">text</div>
Then write this javascript to do the trick for you!
document.getElementById("cpy").addEventListener("click", () => {
navigator.clipboard.writeText(document.getElementById("your-div-id").textContent).then(() => {
console.log('Copied to clipboard!!!');
});
});
Make sure you "enqueue/inject" your javascript to the page you're testing.
Let me know if you were able to get it to work!
What @Ruvee said is correct. You typically need to enqueue scripts on your site to make sure everything works as expected. If that isn't your cup of tea I would suggest using a plugin like Simple CSS and JS Plugin.
You can add that piece of code as a new JS file using that plugin and should work just fine.
