tabla - Uso de execCommand(Javascript) para copiar texto oculto al portapapeles

copiar texto en javascript

Question

Estoy tratando de copiar al portapapeles sin usar Flash, planeo recurrir a Flash con el uso de ZeroClipboard si el navegador es incompatible con el enfoque de javascript.

Tengo un oyente onClick para el botón que se parece a:

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied);
    copyDiv.focus();
    document.execCommand(''SelectAll'');
    document.execCommand("Copy", false, null);
}

y un campo de entrada como sigue:

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo"/>

Actualmente funciona como se esperaba, pero el diseño requiere que el campo que contiene el texto a copiar sea invisible. He intentado configurar el type="hidden" y el style="display: none" ninguno de los cuales ha tenido éxito. El resultado es que el botón selecciona toda la página y copia todo el contenido al portapapeles del usuario.
Estoy relativamente seguro de que la causa no está basada en el navegador, pero en caso de ser así, estoy probando en Chrome (versión 43.0.2357.134 (64 bits)) en Mac OS X 10.10.4.

¿Hay alguna forma en la que pueda mantener la funcionalidad de cuando la <entrada> esté visible mientras la oculto? ¿O si no es una ruta alternativa puedo tomar?

Soy consciente de preguntas similares, ninguna de las cuales resuelve mi problema, ya sea por ser demasiado viejo, por no usar Javascript o por no encajar en el escenario particular. Aquí hay una buena respuesta para cualquier persona que tenga problemas similares, menos específicos.

Answer 1

--Actualizar--

Document.execCommand()

[1] Antes de Firefox 41, la capacidad del portapapeles tenía que estar habilitada en el archivo de preferencias de user.js. Consulte una breve guía de las preferencias de Mozilla para obtener más información . Si el comando no era compatible o estaba habilitado, execCommand estaba generando una excepción en lugar de devolver falso. En Firefox 41 y versiones posteriores, la capacidad del portapapeles está habilitada de manera predeterminada en cualquier controlador de eventos que pueda abrir una ventana (scripts de confianza parcial) ).

Desde la versión 41 de Firefox, Document.execCommand () ahora funciona. Así que ya no hay necesidad de usar un respaldo.

Dado que los navegadores parecen comportarse de manera diferente cuando se trata del acceso al portapapeles, me tomó un tiempo lograrlo.

Es bastante similar a su solución, pero la diferencia es crear un elemento temporal y llenarlo con el value entrada. De esa manera podemos mantener la propiedad de display la entrada establecida en none .

También hay una solución para IE que usa window.clipboardData .

Firefox no me dejó acceder al portapapeles en absoluto. Así que tuve que agregar un prompt para permitir que los usuarios copien manualmente el valor de entrada. Claro que un prompt es feo, pero puedes usar una ventana modal similar, que haría lo mismo.

Ya que esto parece ser una cosa complicada, estoy en Win7 (64 bits) y probado en

Chrome - Versión 43.0.2357.134 m

IE - Versión 11.0.9600.17914

y Firefox es irrelevante, porque no me permitiría acceder a él de todos modos.

var copyBtn   = $("#copy-btn"),
    input     = $("#copy-me");

function copyToClipboardFF(text) {
  window.prompt ("Copy to clipboard: Ctrl C, Enter", text);
}

function copyToClipboard() {
  var success   = true,
      range     = document.createRange(),
      selection;

  // For IE.
  if (window.clipboardData) {
    window.clipboardData.setData("Text", input.val());        
  } else {
    // Create a temporary element off screen.
    var tmpElem = $(''<div>'');
    tmpElem.css({
      position: "absolute",
      left:     "-1000px",
      top:      "-1000px",
    });
    // Add the input value to the temp element.
    tmpElem.text(input.val());
    $("body").append(tmpElem);
    // Select temp element.
    range.selectNodeContents(tmpElem.get(0));
    selection = window.getSelection ();
    selection.removeAllRanges ();
    selection.addRange (range);
    // Lets copy.
    try { 
      success = document.execCommand ("copy", false, null);
    }
    catch (e) {
      copyToClipboardFF(input.val());
    }
    if (success) {
      alert ("The text is on the clipboard, try to paste it!");
      // remove temp element.
      tmpElem.remove();
    }
  }
}

copyBtn.on(''click'', copyToClipboard);

#copy-me {
    display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Element To Be Copied" id="copy-me" value="foo loves bar"/>
<button id="copy-btn">Copy</button><br/><br/>
<textarea placeholder="paste here"></textarea>

Answer 2

Aquí está mi solución que no usa jQuery:

function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}

<!DOCTYPE html>
<html>
<head>
<title>Set Clipboard</title>
</head>
<body>
    <button onclick="setClipboard(''foo loves bar'')">Set Clipboard</button>
</body>
</html>

Answer 3

Aquí hay una respuesta fácil, aunque complicada, que parece funcionar para mí. En lugar de usar display: none; utilizar esta:

height: 0px;
width: 0px;
overflow: hidden;
position: absolute;

Esto permite la selección sin dejar de ocultar el área de texto y sin afectar el diseño.

Answer 4

Gracias a la ayuda de @DavidDomain, encontré un enfoque algo intrincado pero funcional.

En primer lugar, moví la entrada fuera de la pantalla y modifiqué algunas propiedades, lo que resultó en esto:

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo" style="display:none; position: relative; left: -10000px;"/>

pantalla: ninguna fue agregada después de las siguientes modificaciones al js

Después de eso, el comentario de @Pokkanome me permitió modificar la función onClick así:

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied);
    copyDiv.style.display = ''block'';
    copyDiv.focus();
    document.execCommand(''SelectAll'');
    document.execCommand("Copy", false, null);
    copyDiv.style.display = ''none'';
}

No estoy seguro si es posible copiar desde un div oculto usando este método, lo que tendría sentido en términos de seguridad del navegador, ya que dar un acceso incuestionable al portapapeles será algo arriesgado. Sin embargo, el enfoque adoptado tuvo el mismo resultado previsto.