¿Obtener contenido actual del portapapeles? [cerrado]

107

Me gustaría saber una forma de hacer que mi script detecte el contenido del portapapeles y lo pegue en un campo de texto cuando se abre la página, sin que el usuario ingrese. ¿Cómo puede hacerse esto?

Gabriele Cirulli
fuente
Realmente no puede saber qué hay en el portapapeles de un usuario a menos que haya utilizado algún tipo de backend flash cuando copió el texto. ------- Actualización: Una respuesta más correcta aquí
Naftali alias Neal

Respuestas:

73

window.clipboardData.getData('Text')funcionará en algunos navegadores. Sin embargo, muchos navegadores en los que funciona le preguntará al usuario si desea o no que la página web tenga acceso al portapapeles.

Dave
fuente
17
¿Funcionará esto en cualquier navegador que no sea Internet Explorer?
Anderson Green
6
Probablemente no. Vea esta pregunta: stackoverflow.com/questions/400212/…
Dave
7
Puede comprobar la compatibilidad aquí caniuse.com/#search=clipboardData
Sergey Novikov
1
Una mejor solución es obtener el objeto nodo, pero no el objeto ventana. Ver aquí
rplaurindo
Me preocupa Keepass y su seguridad. La aplicación me permite copiar mis contraseñas al portapapeles.
René Winkler
69

Utilice la nueva API del portapapeles , a través de navigator.clipboard. Se puede usar así:

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

O con sintaxis asincrónica:

const text = await navigator.clipboard.readText();

Tenga en cuenta que esto le pedirá al usuario un cuadro de diálogo de solicitud de permiso, por lo que no es posible un negocio divertido.

El código anterior no funcionará si se llama desde la consola. Solo funciona cuando ejecuta el código en una pestaña activa. Para ejecutar el código desde su consola, puede establecer un tiempo de espera y hacer clic en la ventana del sitio web rápidamente:

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

Obtenga más información sobre la API y el uso en los documentos para desarrolladores de Google .

Especificaciones

iuliu.net
fuente
18
Tenga en cuenta que siempre da como resultado un error cuando se llama desde la consola. Pero hace el trabajo en una acción directa del usuario, al igual que al pulsar un botón en la página.
Klesun
esto parece devolver solo texto sin formato ... incluso cuando hay texto enriquecido en el portapapeles. ¿cómo puedo conseguir eso? \
Michael
@Michael, se acaba de agregar soporte para imágenes y otros en la última versión de Chrome (76)
iuliu.net
Puede probar en la consola envolviendo en a setTimeout, luego haciendo clic de nuevo en la página.
edbentley
18

Puedes usar

window.clipboardData.getData('Text')

para obtener el contenido del portapapeles del usuario en IE. Sin embargo, en otros navegadores es posible que deba usar flash para obtener el contenido, ya que no existe una interfaz estándar para acceder al portapapeles. Puede que puedas probar este complemento Zero Clipboard

Ricky Jiao
fuente
1
el enlace funciona bien (de nuevo)
Stephanos
5
ZeroClipboard solo le permite copiar a portapapeles, no leer de él.
DSimón
4

A continuación, obtendrá el contenido seleccionado y actualizará el portapapeles.

Vincula la identificación del elemento con el evento de copia y luego obtén el texto seleccionado. Puede reemplazar o modificar el texto. Obtenga el portapapeles y configure el nuevo texto. Para obtener el formato exacto, debe establecer el tipo como "texto / hmtl". También puede vincularlo al documento en lugar de al elemento.

document.querySelector('element').bind('copy', function(event) {
  var selectedText = window.getSelection().toString(); 
  selectedText = selectedText.replace(/\u200B/g, "");

  clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
  clipboardData.setData('text/html', selectedText);

  event.preventDefault();
});
Sollymanul Islam
fuente
21
¡Bienvenidos a este sitio! Me alegra que esté contribuyendo respondiendo una pregunta. Pero tenga en cuenta que su respuesta realmente no responde a la pregunta del OP. La pregunta es recuperar contenido del portapapeles y pegarlo en algún lugar al abrir una página. Además, dado que la pregunta no tiene una etiqueta jquery , las respuestas con jQuery deben contener una nota de que se usa una biblioteca (jQuery).
KarelG