如何将分区文本替换为“已复制！”使用 clipboard.js 单击并使其在几秒钟后消失？

Question

我希望 'div' 的文本仅在几秒钟内更改为 "copied!"，并在该特定时间段后恢复原始文本。

这是代码示例：

<!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>

Answer 1

您需要使用 setInterval 来实现此目的。下面的代码在您复制文本后运行 "timer" 函数 1000 毫秒。随意将该值更改为您喜欢的任何值。

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);
});

Answer 2

我们可以通过使用 jquery setTimeout 来实现，如下所示：

  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);}

我们还可以使用 jquery show hide fadeout 方法，例如：

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

如何将分区文本替换为“已复制！”使用 clipboard.js 单击并使其在几秒钟后消失？

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

javascript

jquery

clipboard.js