Unir dos codigos javascript

yopmail · #1 (**permalink**) 03/02/2017, 05:34

Hola, tras buscar mucho en google encontré el siguiente código:

Código PHP:

  <script language="JavaScript">
    // Establecemos las variables
    var textarea = document.getElementById("textarea");
    var answer = document.getElementById("copyAnswer");
    var copy   = document.getElementById("copyBlock");
    copy.addEventListener('click', function(e) {
       // Sleccionando el texto
       textarea.select();
       try {
           // Copiando el texto seleccionado
           var successful = document.execCommand('copy');
     
           if(successful) answer.innerHTML = '<div class="copyAnswer">Código copiado correctamente</div>';
           else answer.innerHTML = '<div class="copyAnswer">Error al copiar el código</div>';
       } catch (err) {
           answer.innerHTML = '<div class="copyAnswer">Error al copiar código</div>';
       }
    });

 

  </script>

Lo que hace es permitir Copiar un texto con solo darle a un botón...

Pero hay un problema, y es que al clicar sobre el botón sale un mensaje diciendo "Código copiado correctamente" pero... este mensaje queda fijo... y me gustaria que tras unos segundos desaparezca...

Alguien podría echarme una mano con eso?

+1 por toda ayuda

mpozo · #2 (**permalink**) 03/02/2017, 15:10

Puedes usar el temporizador setTimeout(). Aparte he realizado algunos cambios para que sea más optimo

Código Javascript:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
        <style>
            
        </style>
 
    </head>
    <body>
        <textarea id="textarea">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem modi ipsum eligendi eos assumenda, inventore, itaque recusandae voluptatum amet eveniet numquam repudiandae aliquam dolores minima non at odio expedita, fugit!</textarea>
 
        <input type="button" id="copyBlock" value="copiar">
        <div id="copyAnswer"></div>
 
        <script>
            document.getElementById("copyBlock").addEventListener('click', function(e) {
            // Sleccionando el texto
                document.getElementById("textarea").select();
            // Copiando el texto seleccionado
                var successful = document.execCommand('copy'),
                answer = document.getElementById("copyAnswer"),
                respuesta = {true : 'Código copiado correctamente', false : 'Error al copiar el código'};
 
                answer.textContent = respuesta[successful];
                window.setTimeout(function() {answer.textContent = ''}, 3000);
            });
        </script>
    </body>
</html>

yopmail · #3 (**permalink**) 04/02/2017, 06:19

mpozo te pasastre tres pueblos, mil gracias y +100000 si pudiese dartelos.. Gracias

Como curiosidad, que funcion hace la meta " <meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">" ?

mpozo · #4 (**permalink**) 04/02/2017, 06:50

Se usa para controlar las dimensiones y escalado en navegadores para dispositivos móviles http://www.htmlcinco.com/etiqueta-me...ort-web-movil/