Dear StackOverflow Community,
I recently had this code to have a button that copies the URL to the clipboard. It had a text displayed on the button ("copy") and after clicking on the button the text turned to "kopiert" ("copied"). 2 seconds later it turned back. Now I changed the originalText to an Icon. The problem is, that the icon turns into the old "kopiert" text and after 2 Seconds it turns to the originalText. But the Icon is not a text anymore, so it turns to nothing. How can I change that, so it turns back to the Icon again? Also I would like to replace the "kopiert" text to the same icon, but the icon is a little more bigger.
Really appreciate any help!
Code:
<div class="background">
<center>
<button class="clipboard"><i class="fas fa-copy"></i></button>
</center>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
const originalText = $('.clipboard').text();
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$('.clipboard').text("kopiert!");
// Run something in 2 seconds to revert back to the button's text
setTimeout(function() {
$('.clipboard').text(originalText);
}, 2000); // 2 seconds
})
</script>
Aucun commentaire:
Enregistrer un commentaire