Estoy tratando de agregar un botón para copiar una cadena de texto simple pero sin éxito.

function kopiraj() {
  var copyText = document.getElementById("toCopy");
  copyText.select();
  document.execCommand("Copy");
  document.getElementById("telefon").innerHTML = 'Copied';
}
<button type="button" onclick="kopiraj()">Copy</button>
<input type="hidden" id="toCopy" value="123456789">
<p id="telefon"></p>

No pone nada en el Portapapeles.

No necesito campo de entrada. Puedo agregar texto en JS mismo.

5
Ivan 1 mar. 2018 a las 18:36

3 respuestas

La mejor respuesta

En lugar del atributo hidden, use una clase fuera de pantalla y el atributo aria-hidden (este último para accesibilidad):

.offscreen {
    position: absolute;
    left: -999em;
}

<input ... class="offscreen" aria-hidden="true">
11
isherwood 1 mar. 2018 a las 15:42

No puede seleccionar un elemento oculto.

La mejor manera es copiar el valor en el elemento a otro elemento visible.

Como puede ver, creé un textarea con una posición absoluta y configuré la parte superior e izquierda en -9999px. Entonces, ahora puede copiar el valor en hidden element a textarea y luego hacer frente al valor en textarea al portapapeles

function kopiraj() {
  var copyFrom = document.getElementById("toCopy"); //Value to copy
  var copyTo  = document.getElementById("valueToCopy"); //Visible element to copy the value to
  
  copyTo.value = copyFrom.value; //Fill the visible element with the value to copy 
  copyTo.select(); //Select the value
  document.execCommand("Copy"); //Copy
  copyTo.value = ""; //Empty the visible element after copy
}
.valueToCopy{
  position: absolute;
  top: -9999px;
  left: -9999px;
  opacity: 0;
}
<textarea class="valueToCopy" id="valueToCopy"></textarea>

<button type="button" onclick="kopiraj()">Copy</button>
<input type="hidden" id="toCopy" value="123456789">
0
Mario Rawady 1 mar. 2018 a las 15:51

No puede .select() un elemento oculto que tenga visibility: hidden; o display: none; pero puede hacer algo como esto:

function kopiraj() {
  var copyText = document.getElementById("toCopy");
  copyText.select();
  document.execCommand("Copy");
}
[aria-hidden="true"] {
  opacity: 0;
  position: absolute;
  z-index: -9999;
  pointer-events: none;
}
<button type="button" onclick="kopiraj()">Copy</button>
<input type="text" id="toCopy" value="123456789" aria-hidden="true">
4
Patrick Roberts 1 mar. 2018 a las 15:43