I am trying to copy a text to the Clipboard via javascript and Jquery and in a very specific case it does not work

Asked

Viewed 54 times

-1

I am writing a very specific Site, to meet people with special needs, which implies to automate almost everything, despite the site, have a "appearance" common to any user. Almost all navigation, clicks, etc., are done not only by mouse and keyboard, but by "gestures" and/or "voice". Everything works perfectly by simulating keyboard and mouse events via Jquery however, a single thing simply DOESN’T WORK. Copy to Clipboard. Although the Button receives the event, the copy is not done. But if you physically click the button, it works perfectly. Would anyone know why and/or suggest a solution? I have used numerous libraries to access Clipboard and with ALL happens the same thing. Follow the code I’m using for testing.

    <!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>
<!-- Esta é a parte do codigo que interessa -->
<textarea class="textarea">Vamos copiar este texto?</textarea>
<br>
<button class="copiar" >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();

  try {
    var successful = document.execCommand('copy');
    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() {
    $( "button:last" ).trigger( "click" );
}
</script>

</body>
</html>
javascript

1 answer

0

You are calling the function 

<body onLoad="primeclick();">

And the function is as follows: 

function primeclick() {
    $( "button:last" ).trigger( "click" );
}

How will the body know which button "last" if there was no click? I suggest you seven the button with an ID.

function primeclick() {
    $( "#idButton" ).trigger( "click" );
}

  • The body knows because I refer to the "button:last" and the last button is just it. The problem is not the reference, when the page presses, the button is triggered normally but the response of the copy is "no". Meaning the event is recognized and triggered but the copy is not made.

  • Fernando, in order not to go blank, I did what you suggested and the result was exactly the same. This reinforces what I said before: "The problem is not in the recognition of click simulation. The problem is that when the click is simulated and NON-PHYSICAL, the copy to the Clipboard is not made."

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.