¿Cómo copio al portapapeles en JavaScript?

3845

¿Cuál es la mejor forma de copiar texto en el portapapeles (navegador múltiple)?

Yo he tratado:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
        clipboardHelper.copyString(text);
    }
}

Pero en Internet Explorer da un error de sintaxis. En Firefox, dice que unsafeWindow no está definido .

Un buen truco sin usar Flash : ¿Cómo accede Trello al portapapeles del usuario?

10
  • Solo por curiosidad, ¿qué es lo que desea copiar al portapapeles que el usuario no puede hacer por sí mismo? scunliffe 30 de diciembre de 2008 a las 16:52
  • 286
    Nada especial. Pueden hacerlo por sí mismos, pero también quiero ofrecer la posibilidad de hacer clic en un botón sin preocuparse por seleccionar la parte correcta del texto. Santiago Corredoira 31 de diciembre de 2008 a las 0:03
  • 7
    Esta larga publicación de blog contiene muchas formas de hacer esto: Accediendo al Portapapeles del Sistema con JavaScript - ¿Un Santo Grial? Aaron Digulla 21/04/11 a las 8:26
  • 2
    Está dando una excepción indefinida del navegador en IE y en FFJagadeesh 22 de febrero de 2013 a las 7:43
  • 4
    Si podemos poner texto en el portapapeles del usuario, podemos arruinar su portapapeles. Frank Fang 11/06/2014 a las 12:15
2794

Visión general

Hay tres API de navegador principales para copiar al portapapeles:

  1. API de portapapeles asíncrono [navigator.clipboard.writeText]

    • Parte centrada en texto disponible en Chrome 66 (marzo de 2018)
    • El acceso es asincrónico y utiliza promesas de JavaScript , se puede escribir para que los mensajes de seguridad del usuario (si se muestran) no interrumpan el JavaScript en la página.
    • El texto se puede copiar al portapapeles directamente desde una variable.
    • Solo se admite en páginas publicadas a través de HTTPS.
    • En las páginas de Chrome 66, las pestañas inactivas pueden escribir en el portapapeles sin una solicitud de permisos.
  2. document.execCommand('copy')( obsoleto ) 👎

    • La mayoría de los navegadores admiten esto a partir de ~ abril de 2015 (consulte Soporte del navegador a continuación).
    • El acceso es síncrono, es decir, detiene JavaScript en la página hasta que se completa, incluida la visualización y la interacción del usuario con las indicaciones de seguridad.
    • El texto se lee del DOM y se coloca en el portapapeles.
    • Durante las pruebas, abril de 2015, solo se observó que Internet Explorer mostraba avisos de permisos mientras se escribía en el portapapeles.
  3. Anulando el evento de copia

    • Consulte la documentación de la API del Portapapeles sobre cómo anular el evento de copia .
    • Le permite modificar lo que aparece en el portapapeles desde cualquier evento de copia, puede incluir otros formatos de datos distintos al texto sin formato.
    • No se trata aquí, ya que no responde directamente a la pregunta.

Notas generales de desarrollo

No espere que los comandos relacionados con el portapapeles funcionen mientras prueba el código en la consola. Generalmente, se requiere que la página esté activa (API Async Clipboard) o requiere la interacción del usuario (por ejemplo, un clic del usuario) para permitir ( document.execCommand('copy')) acceder al portapapeles, consulte a continuación para obtener más detalles.

IMPORTANTE (indicado aquí 2020/02/20)

Tenga en cuenta que, dado que esta publicación se escribió originalmente, la desaprobación de los permisos en IFRAME de origen cruzado y otros "sandboxing" de IFRAME evita que las demostraciones integradas, los botones "Ejecutar fragmento de código" y el "ejemplo de codepen.io" funcionen en algunos navegadores (incluidos Chrome y Microsoft Edge ).

Para desarrollar cree su propia página web, sirva esa página a través de una conexión HTTPS para probar y desarrollar.

Aquí hay una página de prueba / demostración que demuestra el funcionamiento del código: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Debido al nivel de compatibilidad del navegador con la nueva API Async Clipboard, es probable que desee recurrir al document.execCommand('copy')método para obtener una buena cobertura del navegador.

Aquí hay un ejemplo simple (puede que no funcione integrado en este sitio, lea la nota "importante" arriba):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(El ejemplo de codepen.io puede no funcionar, lea la nota "importante" arriba) Tenga en cuenta que este fragmento no funciona bien en la vista previa incrustada de Stack Overflow, puede probarlo aquí: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

API de portapapeles asíncrono

Tenga en cuenta que existe la posibilidad de "solicitar permiso" y probar el acceso al portapapeles a través de la API de permisos en Chrome 66.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copiar')

El resto de esta publicación se centra en los matices y los detalles de la document.execCommand('copy')API.

Soporte del navegador

El document.execCommand('copy')soporte de JavaScript ha crecido, consulte los enlaces a continuación para obtener actualizaciones del navegador: ( obsoleto ) 👎

Ejemplo simple

(puede que no funcione incrustado en este sitio, lea la nota "importante" arriba)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  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');
  }
});
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Ejemplo complejo: copiar al portapapeles sin mostrar la entrada

El ejemplo simple anterior funciona muy bien si hay un elemento textareao inputvisible en la pantalla.

En algunos casos, es posible que desee copiar texto al portapapeles sin mostrar un elemento input/ textarea. Este es un ejemplo de una forma de evitar esto (básicamente, inserte un elemento, cópielo al portapapeles, elimine el elemento):

Probado con Google Chrome 44, Firefox 42.0a1 e Internet Explorer 11.0.8600.17814.

(puede que no funcione incrustado en este sitio, lea la nota "importante" arriba)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if the element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in the top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of the white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.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');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Notas adicionales

Solo funciona si el usuario realiza una acción

Todas las document.execCommand('copy')llamadas deben realizarse como resultado directo de una acción del usuario, por ejemplo, haga clic en el controlador de eventos. Esta es una medida para evitar meterse con el portapapeles del usuario cuando no lo espera.

Consulte la publicación de Google Developers aquí para obtener más información.

API del portapapeles

Tenga en cuenta que el borrador de la especificación completa de la API del Portapapeles se puede encontrar aquí: https://w3c.github.io/clipboard-apis/

¿Es compatible?

  • document.queryCommandSupported('copy')debería volver truesi el comando "es compatible con el navegador".
  • y document.queryCommandEnabled('copy')regrese truesi document.execCommand('copy')tendrá éxito si se llama ahora. Verificación para asegurarse de que se haya llamado al comando desde un hilo iniciado por el usuario y se cumplan otros requisitos.

Sin embargo, como un ejemplo de los problemas de compatibilidad del navegador, Google Chrome desde abril a ~ ~ de octubre de de 2015 regresó truede document.queryCommandSupported('copy')si el comando se llama desde un hilo iniciado por el usuario.

Tenga en cuenta los detalles de compatibilidad a continuación.

Detalle de compatibilidad del navegador

Si bien una simple llamada a document.execCommand('copy')envuelto en un bloque try/ catchllamado como resultado de un clic del usuario le dará la mayor compatibilidad, lo siguiente tiene algunas condiciones:

Cualquier llamada a document.execCommand, document.queryCommandSupportedo document.queryCommandEnableddebería estar envuelta en un bloque try/ catch.

Las diferentes implementaciones del navegador y las versiones del navegador arrojan diferentes tipos de excepciones cuando se llaman en lugar de regresar false.

Las diferentes implementaciones del navegador todavía están en proceso de cambio y la API del Portapapeles todavía está en borrador, así que recuerde hacer sus pruebas.

4
1317

La copia automática al portapapeles puede ser peligrosa y, por lo tanto, la mayoría de los navegadores (excepto Internet Explorer) lo hacen muy difícil. Personalmente, utilizo el siguiente truco simple:

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

Al usuario se le presenta el cuadro de aviso, donde el texto a copiar ya está seleccionado. Ahora basta con presionar Ctrl+ Cy Enter(para cerrar la caja) - ¡y listo!

Ahora la operación de copia del portapapeles es segura , porque el usuario lo hace manualmente (pero de una manera bastante sencilla). Por supuesto, funciona en todos los navegadores.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>
13
  • 18
    Pero hay un límite en la cantidad de caracteres que se muestran en ese cuadro de diálogo y, por lo tanto, hay un límite en la cantidad de datos que se copiarán. Denilson Sá Maia 4 de septiembre de 2011 a las 2:32
  • 97
    Inteligente, pero esto solo admite una sola línea. Aram Kocharyan 23/10/11 a las 8:56
  • 64
    Es trivial cambiar la función de "solicitud" a un modal personalizado, la esencia del truco es usar un campo de contenido editable y preseleccionar el texto, y que no interrumpa la interfaz de usuario del navegador al obligar al usuario a tomar la acción ellos mismos. A ++Jon z 17/01/12 a las 18:57
  • 24
    Si su texto tiene más de 2000 caracteres, se truncará, pero para muestras de texto más pequeñas, funciona muy bienRasTheDestroyer 4 de septiembre de 2013 a las 18:51
  • 9
    @RasTheDestroyer: el truncamiento en 2k caracteres parece ser un problema de Chrome, pero es bueno saberlo independientementeMarcus Pope 18 de septiembre de 2013 a las 23:19
418
+50

El siguiente enfoque funciona en Chrome, Firefox, Internet Explorer y Edge, y en versiones recientes de Safari (se agregó soporte de copia en la versión 10 que se lanzó en octubre de 2016).

  • Cree un área de texto y establezca su contenido en el texto que desea copiar en el portapapeles.
  • Agregue el área de texto al DOM.
  • Seleccione el texto en el área de texto.
  • Llamar document.execCommand ("copiar")
  • Elimina el área de texto del dom.

Nota: no verá el área de texto, ya que se agrega y elimina dentro de la misma invocación sincrónica del código Javascript.

Algunas cosas a tener en cuenta si está implementando esto usted mismo:

  • Por razones de seguridad, esto solo se puede llamar desde un controlador de eventos como hacer clic (al igual que con la apertura de ventanas).
  • Internet Explorer mostrará un cuadro de diálogo de permisos la primera vez que se actualice el portapapeles.
  • Internet Explorer y Edge se desplazarán cuando el área de texto esté enfocada.
  • execCommand () puede arrojar en algunos casos.
  • Las nuevas líneas y las pestañas se pueden tragar a menos que use un área de texto. (La mayoría de los artículos parecen recomendar el uso de un div)
  • El área de texto estará visible mientras se muestre el cuadro de diálogo de Internet Explorer; debe ocultarlo o utilizar la API de datos del portapapeles específica de Internet Explorer.
  • En Internet Explorer, los administradores del sistema pueden desactivar la API del portapapeles.

La función a continuación debe manejar todos los siguientes problemas de la manera más limpia posible. Deje un comentario si encuentra algún problema o tiene alguna sugerencia para mejorarlo.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return window.clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

15
  • 13
    Buena respuesta: compatibilidad con varios navegadores, manejo de errores + limpieza. A partir del nuevo soporte de hoy para queryCommandSupported, copiar al portapapeles ahora es factible en Javascript y esta debería ser la respuesta aceptada, en lugar de la incómoda solución alternativa 'window.prompt ("Copiar al portapapeles: Ctrl + C, Enter", text)'. window.clipboardData es compatible con IE9, por lo que debe agregar IE9 en la lista de compatibilidad del navegador y creo que tal vez IE8 y anteriores también, pero es necesario verificarlo. user627283 1 dic 2015 a las 17:38
  • Sí. IE 8/9 Debería estar bien. Nuestra aplicación no los admite. Entonces no lo he probado. IE detiene el soporte en enero, así que no estoy demasiado preocupado. Con suerte, el soporte de Safari aterrizará pronto. Estoy seguro de que está en su radar. Greg Lowe 1 dic 2015 a las 22:08
  • 6
    @SantiagoCorredoira: En 2016, esta merece ser la respuesta aceptada. Considere reasignar el BGT (marca verde grande). Lawrence Dol 22/04/2016 a las 1:25
  • 3
    @Noitidart lo probé y funciona perfectamente para Firefox 54, Chrome 60 y el navegador Edge, incluso cuando el foco no está en el documento html, el error que está teniendo probablemente sea específico de la versión FF 55Tosin John 12 de agosto de 2017 a las 1:01
  • 2
    @Noitidart Todavía funciona perfectamente aquí, centrarse en las herramientas de desarrollo no lo detuvo. Y, por cierto, ¿qué hará un usuario normal de una aplicación web con las herramientas de desarrolloTosin John 12 de agosto de 2017 a las 16:48
144

Aquí está mi opinión sobre eso ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Tenga en cuenta que el uso del inputcampo html no respetará los saltos de línea \ny aplanará cualquier texto en una sola línea.

Como lo menciona @nikksan en los comentarios, el uso textareasolucionará el problema de la siguiente manera:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}
6
  • @nikksan ¿cómo copiar la cadena \n? sof-03 22 de mayo de 2018 a las 10:17
  • 4
    @ sof-03 usa textarea en lugar de input y agrega \r\npara un salto de líneanikksan 22 de mayo de 2018 a las 11:18
  • 1
    No funciona en Microsoft Edge 42.17134.1.0 en Win10x64Honsa Stunna 30 de mayo de 2018 a las 14:26
  • 4
    He copiado tu respuesta. Funciona en cromo y eso es todo lo que necesito. user875234 15/11/18 a las 14:51
  • Esta es la solución más simple que funciona con Firefox v68.0.2 (64 bits). Arya 24/08/19 a las 5:37
91

Leer y modificar el portapapeles de una página web plantea problemas de seguridad y privacidad. Sin embargo, en Internet Explorer, es posible hacerlo. Encontré este fragmento de ejemplo :

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />
5
  • 7
    Usar flash para una operación de copia simple parece una exageración, me alegro de que hubiera una forma JS limpia de hacer esto. Y como estamos en un entorno corporativo. IE está bien. ¡Gracias Bandi! Eddie 26/01/11 a las 15:10
  • 5
    por favor explique qué execCommand(\\’copy\\’);hace, si no se copia al portapapeles para IE? @mrBornaRozzA 24/04/12 a las 18:02
  • 20
    No utilice if(!document.all)pero if(!r.execCommand)no sea que nadie más lo implementa! Document.all es absolutamente irrelevante para esto. m93a 15 '13 a las 18:24
  • ¿Cómo es que estas preocupaciones sobre la privacidad nunca se plantearon durante una década cuando la gente usaba Flash para alterar el portapapeles? Y si solo permitimos una forma (es decir, copiar y no leer su contenido), ¿cómo genera eso una preocupación por la privacidad? Muhammad bin Yusrat 6/06/2015 a las 11:35
  • @MuhammadbinYusrat: Aunque no es un problema de privacidad, es un problema de UX. Considere que el usuario ha copiado algo y cree que sabe lo que hay en el portapapeles, luego está navegando en su sitio y, de repente, el portapapeles contiene algo que no ha pedido y ha perdido lo que copió en primer lugar. awe 2 oct 2015 a las 12:01
87

Si desea una solución realmente simple (la integración demora menos de 5 minutos) y se ve bien desde el primer momento, Clippy es una buena alternativa a algunas de las soluciones más complejas.

Fue escrito por un cofundador de GitHub. Ejemplo de código de inserción de Flash a continuación:

<object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="110"
    height="14"
    id="clippy">

    <param name="movie" value="/flash/clippy.swf"/>
    <param name="allowScriptAccess" value="always"/>
    <param name="quality" value="high"/>
    <param name="scale" value="noscale"/>
    <param NAME="FlashVars" value="text=#{text}"/>
    <param name="bgcolor" value="#{bgcolor}"/>
    <embed
        src="/flash/clippy.swf"
        width="110"
        height="14"
        name="clippy"
        quality="high"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        FlashVars="text=#{text}"
        bgcolor="#{bgcolor}"/>
</object>

Recuerde reemplazar #{text}con el texto que necesita copiar y #{bgcolor}con un color.

1
  • 13
    Para cualquier persona interesada, verifique que Clippy se usa en GitHub al copiar la URL del repositorio. Radek 23 de mayo de 2011 a las 11:19
77

Recientemente escribí una publicación técnica en un blog sobre este mismo problema (trabajo en Lucidchart y recientemente hicimos una revisión en nuestro portapapeles).

Copiar texto sin formato en el portapapeles es relativamente simple, suponiendo que intente hacerlo durante un evento de copia del sistema (el usuario presiona Ctrl+ Co usa el menú del navegador).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie")    != -1 ||
            navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Poner texto en el portapapeles no durante un evento de copia del sistema es mucho más difícil. Parece que algunas de estas otras respuestas hacen referencia a formas de hacerlo a través de Flash, que es la única forma de hacerlo en varios navegadores (hasta donde tengo entendido).

Aparte de eso, hay algunas opciones de navegador por navegador.

Este es el más simple en Internet Explorer, donde puede acceder al objeto clipboardData en cualquier momento desde JavaScript a través de:

window.clipboardData

(Sin embargo, cuando intenta hacer esto fuera de un evento de cortar, copiar o pegar del sistema, Internet Explorer le pedirá al usuario que otorgue el permiso del portapapeles de la aplicación web).

En Chrome, puede crear una extensión de Chrome que le otorgará permisos del portapapeles (esto es lo que hacemos para Lucidchart). Luego, para los usuarios con su extensión instalada, solo necesitarán disparar el evento del sistema usted mismo:

document.execCommand('copy');

Parece que Firefox tiene algunas opciones que permiten a los usuarios otorgar permisos a ciertos sitios para acceder al portapapeles, pero no he probado ninguno de estos personalmente.

3
  • 3
    No se menciona en la publicación del blog (espero actualizarlo en un futuro cercano), es la capacidad de activar cortar y copiar usando execCommand. Esto es compatible con IE10 +, Chrome 43+ y Opera29 +. Lea sobre esto aquí. updates.html5rocks.com/2015/04/cut-and-copy-commandsRichard Shurtz 20 de mayo de 2015 a las 21:30
  • Un problema con esto es que secuestra otros eventos de copia normales. Brock Adams 4 de febrero de 2017 a las 5:32
  • 1
    ¡NÓTESE BIEN! Este rastreo del navegador es MALO. Característica de olfateo. Estás dificultando la actualización de IE. odinho - Velmont 3 dic 2018 a las 11:31
72

Me gusta este:

<input onclick="this.select();" type='text' value='copy me' />

Si un usuario no sabe cómo copiar texto en su sistema operativo, es probable que tampoco sepa cómo pegarlo. Así que solo tienes que seleccionarlo automáticamente, dejando el resto al usuario.

1
  • A mí también me gusta, porque es corto. También puede copiar:<input onclick="this.select(); document.execCommand('copy');" type='text' value='copy me' />Roubi 28 de mayo a las 13:24
57

clipboard.js es una pequeña utilidad no Flash que permite copiar texto o datos HTML al portapapeles. Es muy fácil de usar, solo incluye el .js y usa algo como esto:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js también está en GitHub .

Note: This has been deprecated now. Migrate to here.

2
  • Angular.io utiliza esta biblioteca para su Tour of Hero y el respaldo en modo elegante para el navegador que no admite execCommand al mostrar un texto preseleccionado que el usuario solo tiene que copiar. John-Philip 30 de ene. De 2017 a las 14:43
  • 1
    Parece que clipboard.js ha sido reemplazado o bifurcado, pero parece que sigue vivo y se mantiene activamente en npmjs.com/package/clipboardJoao 18/06/19 a las 22:19
40

En 2018, así es como puede hacerlo:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Se usa en mi código Angular 6+ así:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Si paso una cadena, la copia. Si nada, copia la URL de la página.

También se puede hacer más gimnasia en el portapapeles. Vea más información aquí:

Desbloqueo del acceso al portapapeles

7
  • ha vinculado a localhostJoe Warner 6/08/18 a las 19:21
  • 2
    Tenga en cuenta que esto no funciona en Safari (versión 11.1.2)arjunattam 20/08/18 a las 10:45
  • 2
    @ arjun27 Bueno, espero que algún día Apple se ponga al día. Aunque este caniuse.com/#feat=clipboard muestra que la versión anterior que mencionaste es parcialmente compatible. KhoPhi 20/08/18 a las 18:23
  • 2
    Obtengo para ambas funciones readText, writeText una Promesa en estado rechazadoramin 9/12/18 a las 20:17
  • 4
    Según el enlace proporcionado, "navigator.clipboard solo es compatible con páginas publicadas a través de HTTPS"TimH - Codidact 20/12/18 a las 19:35
38

Utilizo esto con mucho éxito ( sin jQuery o cualquier otro marco).

function copyToClp(txt){
    var m = document;
    txt = m.createTextNode(txt);
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Advertencia

Las pestañas se convierten en espacios (al menos en Chrome).

0
35

ZeroClipboard es la mejor solución entre navegadores que he encontrado:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Si necesita compatibilidad sin Flash para iOS, simplemente agregue una alternativa:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

5
  • 26
    navegador cruzado con Flash? no funciona en iOS y Android 4.4Raptor 27 de enero de 2014 a las 10:29
  • 1
    Ver respuesta actualizada. Esto permite menos pasos para los usuarios de flash y una alternativa para todos los demás. Justin 27/01/2014 a las 17:38
  • 10
    tiene mil millones de líneas de código. es absolutamente ridículo. mejor no hacerlo en absoluto que incluir un monstruo así en un proyectovsync 27/10/2014 a las 11:25
  • 2
    Hay una versión simple gist.github.com/JamesMGreene/8698897 que es 20K que no tiene todas las comodidades en la versión 74k. Ninguno es muy grande. Supongo que la mayoría de los usuarios están de acuerdo con los milisegundos adicionales que tomará la descarga de un archivo de 74k o 20k, por lo que copiar / pegar es un clic en lugar de dos. Justin 27/10/2014 a las 15:35
  • @Justin Simplemente no puedo hacer que funcione localmente, incluso si copio y pego los ejemplos (hago cambios mínimos, por ejemplo, el valor de srcen las etiquetas de script). Siento que su documentación es bonita pero ineficiente. Gui Imamura 23/07/2015 a las 13:47
29

Dado que Chrome 42+ y Firefox 41+ ahora admiten el comando document.execCommand ('copiar') , creé un par de funciones para una capacidad de copia al portapapeles en varios navegadores utilizando una combinación de la respuesta anterior de Tim Down y la respuesta del desarrollador de Google :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // Internet Explorer
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    }
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy,
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));
<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>
3
  • ¡Gracias por resumir esto! Tiene algunos errores en su código: definió la variable "rango" dos veces (var range = document.createRange ()). Christian Engel 17 de noviembre de 2015 a las 8:59
  • 1
    Tienes razón @ChristianEngel. He eliminado el segundo. No sé cómo llegó ahí. Jeff Baker 19/11/15 a las 2:11
  • Hola jeff, ¿y si quiero personalizar "copiar al portapapeles"? ¡Por favor ayuda! ASHISH KUMAR 18 de junio a las 14:07
27

De uno de los proyectos en los que he estado trabajando, un complemento de copia al portapapeles de jQuery que utiliza la biblioteca ZeroClipboard .

Es más fácil de usar que el complemento nativo Zero Clipboard si eres un gran usuario de jQuery.

14
  • 6
    92kb no es tan grande en realidad, funciona rápido y puede usarlo en text()lugar de innerHTML()si lo desea ..RozzA 24/04/12 a las 17:59
  • 17
    @John: innerHTMLha sido compatible con varios navegadores durante mucho tiempo. El hecho de que a Microsoft se le ocurriera originalmente la idea no la hace poco confiable o propietaria. También ahora finalmente se agrega a la especificación oficial (después de que todos los principales proveedores de navegadores ya agregaron soporte para él ... suspiro ). James M. Greene 17/01/2013 a las 16:43
  • 19
    @John Te quejas de que jQuery no es lo suficientemente JavaScripty en una respuesta que usa Flash;)Max Nanasy 19/04/2013 a las 2:12
  • 4
    innerHTML es mejor que las alternativas en la mayoría de los casos. ¡Bájese de su caballo alto! Es más rápido, más eficiente y no requiere volver a renderizar la página. Orbiting Eden 18/06/2013 a las 19:13
  • 4
    @RozzA 92KBes realmente grande. Hasta que LTE madure, GPRS es el estándar de datos móviles de WW , y comienza en 1 KB/s. Haz las matemáticas tú mismo. Tino 2 de agosto de 2013 a las 7:26
25

    $("td").click(function (e) {
        var clickedCell = $(e.target).closest("td");
        navigator.clipboard.writeText(clickedCell.text());
        alert(clickedCell.text());
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>First<td>
</tr>
<tr>
<td>Second<td>
</tr>
<tr>
<td>Third<td>
</tr>
<tr>
<td>Fourth<td>
</tr>
</table>

He leído todas las respuestas, a partir del 1 de junio de 2020, he estado luchando por resolver esto cuando finalmente encontré la documentación:

$("td").click(function (e) {
    var clickedCell = $(e.target).closest("td");
    navigator.clipboard.writeText(clickedCell.text());
});

Escribirá el texto de la celda en la que se hizo clic en el portapapeles del navegador.

Puede cambiar los selectores "td" por lo que desee, puede agregar console.log para funciones de depuración y / o alerta.

Aquí está la documentación: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

1
  • Sin compatibilidad con IElance.dolan 10/11/20 a las 1:31
25

He reunido lo que creo que es el mejor.

  • Utiliza cssText para evitar excepciones en Internet Explorer en lugar del estilo directamente.
  • Restaura la selección si la hubo
  • Configura solo lectura para que el teclado no aparezca en dispositivos móviles
  • Tiene una solución para iOS para que realmente funcione como normalmente bloquea execCommand.

Aquí está:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off-screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmatic execCommand copying normally, without this hack.
    // https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Uso: copyToClipboard('some text')

0
25

Encontré la siguiente solución:

El controlador on-key-down crea una etiqueta "pre". Configuramos el contenido para copiar a esta etiqueta, y luego hacemos una selección en esta etiqueta y devolvemos verdadero en el controlador. Esto llama al controlador estándar de Chrome y copia el texto seleccionado.

Y si lo necesita, puede establecer el tiempo de espera de una función para restaurar la selección anterior. Mi implementación en MooTools :

function EnybyClipboard() {
    this.saveSelection = false;
    this.callback = false;
    this.pastedText = false;

    this.restoreSelection = function() {
        if (this.saveSelection) {
            window.getSelection().removeAllRanges();
            for (var i = 0; i < this.saveSelection.length; i++) {
                window.getSelection().addRange(this.saveSelection[i]);
            }
            this.saveSelection = false;
        }
    };

    this.copyText = function(text) {
        var div = $('special_copy');
        if (!div) {
            div = new Element('pre', {
                'id': 'special_copy',
                'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
            });
            div.injectInside(document.body);
        }
        div.set('text', text);
        if (document.createRange) {
            var rng = document.createRange();
            rng.selectNodeContents(div);
            this.saveSelection = [];
            var selection = window.getSelection();
            for (var i = 0; i < selection.rangeCount; i++) {
                this.saveSelection[i] = selection.getRangeAt(i);
            }
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(rng);
            setTimeout(this.restoreSelection.bind(this), 100);
        } else return alert('Copy did not work. :(');
    };

    this.getPastedText = function() {
        if (!this.pastedText) alert('Nothing to paste. :(');
        return this.pastedText;
    };

    this.pasteText = function(callback) {
        var div = $('special_paste');
        if (!div) {
            div = new Element('textarea', {
                'id': 'special_paste',
                'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
            });
            div.injectInside(document.body);
            div.addEvent('keyup', function() {
                if (this.callback) {
                    this.pastedText = $('special_paste').get('value');
                    this.callback.call(null, this.pastedText);
                    this.callback = false;
                    this.pastedText = false;
                    setTimeout(this.restoreSelection.bind(this), 100);
                }
            }.bind(this));
        }
        div.set('value', '');
        if (document.createRange) {
            var rng = document.createRange();
            rng.selectNodeContents(div);
            this.saveSelection = [];
            var selection = window.getSelection();
            for (var i = 0; i < selection.rangeCount; i++) {
                this.saveSelection[i] = selection.getRangeAt(i);
            }
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(rng);
            div.focus();
            this.callback = callback;
        } else return alert('Failed to paste. :(');
    };
}

Uso:

enyby_clip = new EnybyClipboard(); // Init

enyby_clip.copyText('some_text'); // Place this in the Ctrl+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
    alert(pasted_text);
}); // Place this in Ctrl+V handler and return true;

Al pegar, crea un área de texto y funciona de la misma manera.

PD: Quizás esta solución se pueda utilizar para crear una solución completa entre navegadores sin Flash. Funciona en Firefox y Chrome.

3
  • 2
    ¿Alguien ha probado eso? ¡Suena como una cosa ingeniosa, en caso de que realmente funcione en una variedad de navegadores! Michael 15 feb.13 a las 14:47
  • 1
    jsfiddle.net/H2FHC Demo: fiddle.jshell.net/H2FHC/show Ábralo y presione Ctrl + V o Ctrl + C. En las horquillas FF 19.0 perfectamente. En Chrome 25.0.1364.97 m también. Opera 12.14 - OK. Safari 5.1.7 para Windows: OK. IE - FALLO. Enyby 28 feb 2013 a las 12:06
  • Para IE, es necesario ejecutar el enfoque en el elemento dentro de la página. Consulte fiddle.jshell.net/H2FHC/3/show y fiddle.jshell.net/H2FHC/3 Trabajó en IE 9/10. IE 6/7 necesita el proceso de selección de creación de otra manera porque document.createRange no es compatible. Enyby 28 feb 2013 a las 12:33
24

Los otros métodos copiarán texto sin formato al portapapeles. Para copiar HTML (es decir, puede pegar los resultados en un editor WYSIWYG), puede hacer lo siguiente en Internet Explorer solamente . Esto es fundamentalmente diferente de los otros métodos, ya que el navegador selecciona visiblemente el contenido.

// Create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}
editableDiv.appendChild(someContentElement);

// Select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");

// Deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();
1
16

Este código se probó en mayo de 2021. Trabaja en Chrome, IE, Edge. El parámetro 'mensaje' a continuación es el valor de cadena que desea copiar.

<script type="text/javascript">
    function copyToClipboard(message) {
        var textArea = document.createElement("textarea");
        textArea.value = message;
        textArea.style.opacity = "0"; 
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();


        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Copying text command was ' + msg);
        } catch (err) {
            alert('Unable to copy value , error : ' + err.message);
        }

        document.body.removeChild(textArea);
    }

</script>
14

A partir de Flash 10, solo puede copiar al portapapeles si la acción se origina en la interacción del usuario con un objeto Flash. ( Lea la sección relacionada del anuncio de Flash 10 de Adobe ).

La solución es superponer un objeto Flash sobre el botón Copiar, o cualquier elemento que inicie la copia. ZeroClipboard es actualmente la mejor biblioteca con esta implementación. Los desarrolladores de Flash experimentados pueden querer crear su propia biblioteca.

0
13

Encontré la siguiente solución:

Tengo el texto en una entrada oculta. Debido a setSelectionRangeque no funciona con entradas ocultas, cambié temporalmente el tipo a texto, copié el texto y luego lo volví a ocultar. Si desea copiar el texto de un elemento, puede pasarlo a la función y guardar su contenido en la variable de destino.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}
13

Ya hay muchas respuestas, sin embargo, me gustaría agregar una (jQuery). Funciona muy bien en cualquier navegador, también en los móviles (es decir, mensajes sobre seguridad, pero cuando lo aceptas, funciona bien).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

En tu código:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}
12

Copie el texto de la entrada HTML al portapapeles:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }
 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Nota: el document.execCommand()método no es compatible con Internet Explorer 9 y versiones anteriores.

Fuente : W3Schools - Copiar texto al portapapeles

10

Tuve el mismo problema al crear una edición de cuadrícula personalizada desde (algo como Excel) y compatibilidad con Excel. Tuve que admitir la selección de varias celdas, copiar y pegar.

Solución: cree un área de texto donde insertará datos para que el usuario los copie (para mí cuando el usuario está seleccionando celdas), establezca el foco en él (por ejemplo, cuando el usuario presione Ctrl) y seleccione todo el texto.

Entonces, cuando el usuario presiona Ctrl+ C, se copian las celdas que seleccionó. Después de probar simplemente cambiar el tamaño del área de texto a un píxel (no probé si funcionará en la pantalla: ninguno). Funciona bien en todos los navegadores y es transparente para el usuario.

Pegar: podría hacer lo mismo de esta manera (difiere en su objetivo): manténgase enfocado en el área de texto y capture los eventos de pegado usando onpaste (en mi proyecto, uso áreas de texto en las celdas para editar).

No puedo pegar un ejemplo (proyecto comercial), pero entiendes la idea.

10

Esta es una combinación entre las otras respuestas.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Utiliza jQuery, pero no tiene por qué hacerlo, por supuesto. Puedes cambiar eso si quieres. Acabo de tener jQuery a mi disposición. También puede agregar algo de CSS para asegurarse de que la entrada no se muestre. Por ejemplo, algo como:

.textToCopyInput{opacity: 0; position: absolute;}

O, por supuesto, también podrías hacer un estilo en línea.

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )
3
  • Cómo copiar directamente desde una variable de datos .ie: var str = "word"; ? user1108948 5 de febrero de 2016 a las 18:49
  • El mensaje variable no se utilizaVoyager 25/04/19 a las 6:50
  • Es mejor usar '<textarea class = "textToCopyInput" /> </textarea>' en caso de que textToCopycontenga\nVoyager 25/04/19 a las 8:07
10

En otros navegadores que no sean Internet Explorer, debe utilizar un pequeño objeto Flash para manipular el portapapeles, p. Ej.

2
  • 2
    Esto está desactualizado ahora ... consulte la sugerencia de GvSMottie 20/09/09 a las 15:20
  • 6
    ¿La sugerencia de GvS utiliza una película flash? ¿No es esa la misma idea? TheEmirOfGroofunkistan 8/10/2009 a las 18:51
8

He usado clipboard.js.

Podemos conseguirlo en npm:

npm install clipboard --save

Y también en Bower

bower install clipboard --save

El uso y los ejemplos se encuentran en https://zenorocha.github.io/clipboard.js/ .

2
8

Para copiar un texto seleccionado ('Texto para copiar') a su portapapeles, cree un Bookmarklet (marcador del navegador que ejecuta JavaScript) y ejecútelo (haga clic en él). Creará un área de texto temporal.

Código de GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');
8

Esta es una expansión de la respuesta de Chase Seibert , con la ventaja de que funcionará para elementos IMAGE y TABLE, no solo DIV en Internet Explorer 9.

if (document.createRange) {
    // Internet Explorer 9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // Does nothing on Firefox
} else {
    // Internet Explorer 8 and earlier. This stuff won't work
    // on Internet Explorer 9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table).
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}
8
function copytoclipboard(element) {

    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val('0' + element).select();
    document.execCommand("copy");
    $temp.remove();
}