Change "copy" to "copied" in clipboard.js after click

Question

Change "copy" to "copied" in clipboard.js after click

Navigation

#1 by (6 votes)

4

I'm trying to make the clipboard.js change the copy button from "COPY" to "COPIED" after the click without losing the function it has that selects the target code.

Would anyone know what I should do?

! function() {
  for (var a = document.getElementsByTagName("pre"), b = document.getElementById("paste-content"), c = 0; c < a.length; c++) {
    var d = a[c].children[0].className.indexOf("language-");
    if (0 === d) {
      var e = document.createElement("button");
      e.className = "copy-button", e.textContent = "COPY", a[c].appendChild(e)
    }
  }
  var f = new Clipboard(".copy-button", {
    target: function(a) {
      return a.previousElementSibling
    }
  })
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script><preclass="input button border"><code class="language-less" id="dialog_coupon_code_1">CODE 1</code></pre>
<pre class="input button border"><code class="language-less" id="dialog_coupon_code_2">CODE 2</code></pre>
<pre class="input button border"><code class="language-less" id="dialog_coupon_code_3">CODE 3</code></pre>

javascript

asked by anonymous 23.12.2017 / 07:31

1 answer

How to create a slide with two divs? "No suitable driver found" in Java database connection

score 6 · Answer 1

To refresh the button, add a callback function in the success event. This event will return (as a parameter) the clicked element and with access to that element, you can change the value of the innerHTML or textContent property.

! function() {
  for (var a = document.getElementsByTagName("pre"), b = document.getElementById("paste-content"), c = 0; c < a.length; c++) {
    var d = a[c].children[0].className.indexOf("language-");
    if (0 === d) {
      var e = document.createElement("button");
      e.className = "copy-button", e.textContent = "COPY", a[c].appendChild(e)
    }
  }
  var f = new Clipboard(".copy-button", {
    target: function(a) {
      return a.previousElementSibling
    }
  })

  /* Adiciona o evento de sucesso */
  f.on('success', function(e) {

    /* Acessa o elemento (Botão) e altera o nome */
    e.trigger.innerHTML = "Copied!"

    /* Código Adcional para voltar o nome original */
    setTimeout(function() {
      e.trigger.innerHTML = "COPY"
      e.clearSelection();
    }, 3000);
  });

  /*
   * (Opcional)
   * Adiciona o evento de falha
   */
  f.on('error', function(e) {

    /* Acessa o elemento (Botão) e altera o nome */
    e.trigger.innerHTML = "Not Copied!";
    
    console.log( 'Action: ${e.action}' );
    console.log( 'Trigger: ${e.trigger}' );

    /* Código Adcional para voltar o nome original */
    setTimeout(function() {
      e.trigger.innerHTML = "COPY"
      e.clearSelection();
    }, 3000);
  });
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script><preclass="input button border">
  <code class="language-less" id="dialog_coupon_code_1">CODE 1</code>
</pre>

<pre class="input button border">
  <code class="language-less" id="dialog_coupon_code_2">CODE 2</code>
</pre>

<pre class="input button border">
  <code class="language-less" id="dialog_coupon_code_3">CODE 3</code>
</pre>