How do I replace the division text with “Copied!” after clicked using clipboard.js and make it disappear after a couple of seconds?

Question

How do I replace the division text with “Copied!” after clicked using clipboard.js and make it disappear after a couple of seconds?

236 views Asked by Anas At 28 September 2018 at 11:24

I want the text of the 'div' to change to "copied!" for only a couple of seconds and get back the original text after that particular time period.

This is a sample of the code:

<!DOCTYPE html>
<html lang="en">

<body

<div class="row">

    <div class="box col-xs-2 btn red1 integration-checklist__copy-button" id="#E44236" data-clipboard-text="#E44236"><p>#E44236</p></div>
    <script>
        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function(e) {
            e.clearSelection();
            e.trigger.textContent = 'Copied!';
        });

        clipboard.on('error', function(e) {
            console.info(e);
        });
    </script>

Original Q&A

There are 2 answers

Mukund On 28 September 2018 at 12:18

We can achieve this by using jquery setTimeout as follows:

  clipboard.on('success', function(e) {
    $(e.trigger).text("Copied!");
    e.clearSelection();
    setTimeout(function() {

//let x = get the original text for this control and reset again after some time    
$(e.trigger).text("original text");
    }, 2500);}

we can also use jquery show hide fadeout methods like:

var clip = new Clipboard('.btn');
clip.on('success', function(e) {
    $('.copied').show();
    $('.copied').fadeOut(1000);
});

**Darren** · Accepted Answer · 2018-09-28 11:56:50

You need to use setInterval to achieve this. The code below runs the "timer" function 1000 milliseconds after you've copied the text. Feel free to change that value to whatever you prefer.

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
    e.clearSelection();
    e.trigger.textContent = 'Copied!';

    var interval = setInterval(timer, 1000);
    function timer() {
        e.trigger.textContent = e.text;
        clearInterval(interval);
    }
});

clipboard.on('error', function (e) {
    console.info(e);
});

TechQA.

How do I replace the division text with “Copied!” after clicked using clipboard.js and make it disappear after a couple of seconds?

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CLIPBOARD.JS

Popular Questions

Popular Tags

Trending Questions