Как заменить текст деления на «Скопировано!» После нажатия с помощью clipboard.js и заставить его исчезнуть через пару секунд? - PullRequest
Новая
       37

Как заменить текст деления на «Скопировано!» После нажатия с помощью clipboard.js и заставить его исчезнуть через пару секунд?

0 голосов
/ 28 сентября 2018

Я хочу, чтобы текст "div" изменился на "скопирован!"только на пару секунд и верните исходный текст после определенного периода времени.

Это пример кода: 

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

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Мы можем добиться этого с помощью 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);
});
0 голосов
/ 28 сентября 2018

Вам нужно использовать 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);
});
...