Estoy creando 3-4 botones de cupón con el texto " COPIAR CÓDIGO ", y cuando las personas hacen clic en él, copia el cupón y cambia el texto a " COPIADO <span> algún icono svg aquí </span> " durante 2 segundos y luego vuelva a cambiar a "CÓDIGO DE COPIA", y cambiará nuevamente cuando se haga clic.
Logré encontrar Javascripts para copiar el código, pero el código que cambia los textos se repite y no puedo usar setTimeout() para lograr el resultado de 2 segundos que quiero.
Espero que me puedan ayudar. Aquí están mis códigos:
HTML
<p class="code" id="code10">OFF10</p> <button onclick="copyToClipboard('#code10');changeText1()" id="button1">COPY CODE</button> <p class="code" id="code20">OFF20</p> <button onclick="copyToClipboard('#code20');changeText2()" id="button2">COPY CODE</button> <p class="code" id="code35">OFF35</p> <button onclick="copyToClipboard('#code35');changeText3()" id="button2">COPY CODE</button>JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } function changeText1() { document.getElementById("button1").innerHTML = "COPIED!"; } function changeText2() { document.getElementById("button2").innerHTML = "COPIED!"; } function changeText3() { document.getElementById("button3").innerHTML = "COPIED!"; }Los scripts anteriores funcionan pero se repiten. Y luego probé la función setTimeout() pero no es lo que esperaba, y sé que entendí mal esta función, no estoy familiarizado con Javascript, solo lo suficiente para entender ~10%. Aquí está el script que probé.
function changeText1() { setTimeout(function() { document.getElementById("button1").innerHTML = "COPIED!"; },2000) }Encontré una solución para su cambio de texto, consulte esto para copiar texto
function changeText(reed) { reed.innerHTML = "COPIED!"; var reedText = reed.previousSibling; navigator.clipboard.writeText(reedText.textContent); setTimeout(function() { reed.innerHTML = "COPY CODE"; }, 2000) } <p class="code" id="code10">OFF10</p> <button onclick="changeText(this)" id="button1">COPY CODE</button> <p class="code" id="code20">OFF20</p> <button onclick="changeText(this)" id="button2">COPY CODE</button> <p class="code" id="code35">OFF35</p> <button onclick="changeText(this)" id="button2">COPY CODE</button>No tiene que usar una función separada para cambiar el texto, ya que será un gran dolor cuando tenga muchos de estos botones en su página.
Aquí está mi solución:
HTML:-
<p class="code" id="code10">OFF10</p> <button onclick="copyToClipboard('#code10', 'button1')" id="button1">COPY CODE</button> <p class="code" id="code20">OFF20</p> <button onclick="copyToClipboard('#code20', 'button2')" id="button2">COPY CODE</button> <p class="code" id="code35">OFF35</p> <button onclick="copyToClipboard('#code35', 'button3')" id="button3">COPY CODE</button>Javascript: -
<script type="text/javascript"> function copyToClipboard(element, button) { console.log($(element).text()); var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); // waiting some time before changing the text setTimeout(function() { changeText(button); },2000); } function changeText(button) { document.getElementById(button).innerHTML = "COPIED!"; } </script>Aquí está la solución final ... no hace clic en el evento en cada botón, vaya tan simple y claro
$(document).ready(function(){ $('button').on('click', function(){ var elem = $(this); var data_id = elem.attr('data-id'); var $temp = $("<input>"); $("body").append($temp); $temp.val(elem.prev('div').find('#'+elem.attr('data-id')).text()).select(); document.execCommand("copy"); $temp.remove(); changeText(elem); }) }) function changeText(elem) { $(elem).text('copied'); changeBack(elem); } function changeBack(elem) { setTimeout(function() { $(elem).text('Copy Code'); },2000) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <p class="code" id="code10">OFF10</p> </div> <button data-id="code10" type="button">COPY CODE</button> <div> <p class="code" id="code20">OFF20</p> </div> <button type="button" data-id="code20">COPY CODE</button> <div> <p class="code" id="code35">OFF35</p> </div> <button type="button" data-id="code35">COPY CODE</button>