Question

我希望将“ div”的文本更改为“ copyed！”。只需几秒钟，然后在特定时间段后恢复原始文本。

这是代码示例：

<!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来实现。复制文本后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显示隐藏淡出方法，例如：

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

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

2 个答案: