Estoy usando clipboard.js para copiar texto en mi página web. He funcionado muy bien, pero me gustaría cambiar el texto del botón después de que un usuario haga clic para copiar el texto.
Esto es lo que tengo hasta ahora: un div con el texto:
<div #landingpage> TEST TEXT </div>un botón:
<button class="btn" id="copy-button" data-clipboard-target="#landingpage" onclick="myFunction()">Copy Content</button>y javascript:
<script> (function(){ new Clipboard('#copy-button'); })(); </script>¿Cómo cambio el texto del botón a "Copiado" después de hacer clic y luego hago que vuelva a "Copiar" después de unos segundos?
Gracias.
Puede escuchar el evento de success del clipboard y cambiar el texto.
JS
$(function() { var $btnCopy = $('#copy-button'); $btnCopy.on('click', function() { var clipboard = new Clipboard('#copy-button'); clipboard.on('success', function(e) { $btnCopy.text('Copied'); setTimeout(function() { $btnCopy.text('Copy'); }, 2000); }); }); });HTML
<div id="landingpage"> TEST TEXT </div> <button class="btn" id="copy-button" data-clipboard-target="#landingpage">Copy Content</button>