Estoy usando el script de w3schools para copiar texto al portapapeles cuando se hace clic, pero el script solo funciona cuando hay un campo de texto. Estoy tratando de que solo se muestre un icono sin campo de texto, por lo que cuando un usuario hace clic en el icono, el texto codificado se copia automáticamente en el portapapeles.

Su script se encuentra aquí: https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Estoy usando display: none; para ocultar el campo de entrada. A pesar de que todo parece funcionar en lo que respecta a JS, simplemente no copia el texto.

¿Hay alguna forma, tal vez a través de otro método o secuencia de comandos, que me permita mostrar un icono para copiar texto en lugar de un campo + icono / enlace?

1
jmbronson 15 sep. 2018 a las 17:10

3 respuestas

La mejor respuesta

Hay una manera de copiar entradas ocultas, pero sin usar display:none, puede enviar la entrada a una ubicación fuera de la vista, usando algo como position:absolute;left:-1000px, por ejemplo:

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
#myInput{position:absolute;left:-1000px}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
0
Emeeus 15 sep. 2018 a las 14:42

Aquí:

            var copyTextareaBtn = document.querySelector('.btn4');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.block2');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
0
user10367815user10367815 15 sep. 2018 a las 14:15

Bueno, no sé si entendí su pregunta, pero asumí que desea copiar algo de texto sin mostrar el texto en su página html, con ese script solo está obteniendo el elemento de la identificación del texto de entrada cada vez que se presiona el botón. Si lo ocultas, no podrás acceder a él. Si solo desea copiar algún texto oculto cada vez que presiona la parte inferior, debe colocar su texto en su archivo javascript y no en su página htlm :)

¡Espero que mi respuesta te haya ayudado!

0
Bizk 15 sep. 2018 a las 14:17