Copia para o Clipboard com Javascrip e/ou Jquery

05/08/2019

Estou tentando fazer uma copia para o Clipboard, simulando um click em um determinado bot�o.
Se clicar Fisicamente, funciona, porem se o click for um "evento simulado", por exemplo um trigger( "click" ),
apesar de o bot�o ser acionado e a fun��o de copia ser executada, ela simlesmente N�O COPIA.

J� tentei encontrar uma solu��o ou pelo menos uma explica��o e INUMEROS foruns e ningu�m foi capaz de dizer nada.
Ser� que aqui eu consigo ao menos uma explica��o para o fato?
Segue o codigo que estou usando para testes: (At� um timeOut eu coloquei para ver se n�o era por problema da pagina ainda n�o ter sido renderizada no navegador).
<!doctype html>
<head>
<meta charset="utf-8">
<title>trigger/Copy testes</title>
<style>
button {
margin: 10px;
}
div {
color: blue;
font-weight: bold;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body onLoad="primeclick();">

<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>

<textarea class="textarea">Vamos copiar este texto?</textarea>
<br>
<button class="copiar" id="btncp" >Copiar Texto</button>
<script>
/*
$( "button:first" ).click(function() {
update( $( "span:first" ) );
});

$( "button:last" ).click(function() {
$( "button:first" ).trigger( "click" );
update( $( "span:last" ) );
});

function update( j ) {
var n = parseInt( j.text(), 10 );
j.text( n + 1 );
}
*/
//Copiar
var copyTextareaBtn = document.querySelector('.copiar');

copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.textarea');
copyTextarea.select();
alert("selecionei");
try {
var successful = document.execCommand('copy');
alert("executei o comando");
var msg = successful ? 'sim!' : 'n�o!';
alert('Texto copiado? ' + msg);
} catch (err) {
alert('Opa, N�o conseguimos copiar o texto, � possivel que o seu navegador n�o tenha suporte, tente usar Crtl+C.');
}
});

function primeclick() {
alert("entrei");
setTimeout("executaclick()",30000);
alert("praparei");
}
function executaclick(){
clearTimeout();
$( "#btncp" ).trigger( "click" );
}
</script>

</body>
</html>

Nedio Paulo

Curtir t�pico + 0

Responder

Posts

03/02/2021

Antonio

oie apliquei uma melhora ai no css, se gostou diga algo, infelizmente ainda nao tenho muito conhecimento de javascript para te ajudar..

<!doctype html>

<head>
  <meta charset="utf-8">
  <title>Criador de textos</title>
<style>
  html,body,h1,h2,p, ul,li,a{
  margin: 0;
  padding: 0;
background: teal;
}
button {
margin: 10px;
}

h3{
color: gray;
font-weight: bold;
padding-top: 10px;
}

span {
color: red;
}
.textarea{
  margin-top: 30px;
  height: 150px;
  width: 400px;
  padding: 10px;
  font-size: 16px;
  font-family:''Courier New'', Courier, monospace ;
}

.header{
  height: 300px;

  color: white;
  width: 100%;
}

.card{
  width: 100%;
  height: 300px;
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  top: -150px;
  background: whitesmoke;
  box-shadow: 8px 4px 8px  10PX rgb(0, 0,0, .7);
  text-align: center;
}

.copiar{
  padding: 20px 30px;
  background: teal;
  border-radius: 8px;
  border: 1px solid bisque;
  color: whitesmoke;
}

.footer{

  font-style: italic;
  text-align: center;
  color: whitesmoke;
}
</style>

</head>

<body>
  <div onLoad="primeclick();">
   
      <div class="header">
     
      </div>
      <!-- Esta � a parte do codigo que interessa -->
       <div class="card">
          
        
        

   
    <div class="main">
        <h3>Escreve qualquer coisa no Campo a seguir.</h3>
         <textarea class="textarea">Vamos copiar este texto?</textarea>
      <br>
      <button class="copiar" id="btncp">Copiar Texto</button>
    </div>
      </div>
    <div class="footer">
       $design by Antonio Sitoe
    </div>


  <script>
    /*
$( "button:first" ).click(function() {
update( $( "span:first" ) );
});

$( "button:last" ).click(function() {
$( "button:first" ).trigger( "click" );
update( $( "span:last" ) );
});

function update( j ) {
var n = parseInt( j.text(), 10 );
j.text( n + 1 );
}
*/
//Copiar
var copyTextareaBtn = document.querySelector(''.copiar'');

copyTextareaBtn.addEventListener(''click'', function(event) {
var copyTextarea = document.querySelector(''.textarea'');
copyTextarea.select();
alert("selecionei");
try {
var successful = document.execCommand(''copy'');
alert("executei o comando");
var msg = successful ? ''sim!'' : ''n�o!'';
alert(''Texto copiado? '' + msg);
} catch (err) {
alert(''Opa, N�o conseguimos copiar o texto, � possivel que o seu navegador n�o tenha suporte, tente usar Crtl+C.'');
}
});
function primeclick() {
alert("entrei");
setTimeout("executaclick()",30000);
alert("praparei");
}
function executaclick(){
clearTimeout();
$( "#btncp" ).trigger( "click" );
}
  </script>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</body>

</html>

Responder

Gostei + 0