I'm using clipboard.js to copy some text on my webpage. I've go that working great but I'd like to change the button text after a user clicks to copy the text.
Here's what I have so far: a div with the text:
<div #landingpage>
TEST TEXT
</div>
a button:
<button class="btn" id="copy-button" data-clipboard-target="#landingpage"
onclick="myFunction()">Copy Content</button>
and javascript:
<script>
(function(){
new Clipboard('#copy-button');
})();
</script>
How do change button text to "Copied" after I click and then have it revert back to just "Copy" after a few seconds.
Thank you.
You could listen to the success event of the clipboard and change the text.
JS
$(function() {
var $btnCopy = $('#copy-button');
$btnCopy.on('click', function() {
var clipboard = new Clipboard('#copy-button');
clipboard.on('success', function(e) {
$btnCopy.text('Copied');
setTimeout(function() {
$btnCopy.text('Copy');
}, 2000);
});
});
});
HTML
<div id="landingpage"> TEST TEXT </div>
<button class="btn" id="copy-button" data-clipboard-target="#landingpage">Copy Content</button>