Change button text after click w / clipboard.js
I am using clipboard.js to copy some text to my webpage. I'm working fine, but I would like to change the button text after the user clicks to copy the text.
Here's what I have so far: div with 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 to change the text of a Copy button after clicking, and then change it back to Copy after a few seconds.
Thank.
+3
source to share
1 answer
You can listen to the success
event 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>
+2
source to share