para - Haga clic en el botón Copiar al portapapeles utilizando jQuery.

copy to clipboard jquery

Question

¿Cómo copio el texto dentro de un div al portapapeles? Tengo un div y necesito agregar un enlace que agregará el texto al portapapeles. ¿Existe alguna solucion para esto?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>

Después de hacer clic en copiar texto, luego presiono Ctrl + V , se debe pegar.

Answer 1

Ambos trabajarán a la perfección :),

1. JAVASCRIPT:

   function CopyToClipboard(containerid) {
   if (document.selection) {
   var range = document.body.createTextRange();
   range.moveToElementText(document.getElementById(containerid));
   range.select().createTextRange();
   document.execCommand("copy");
   } else if (window.getSelection) {
   var range = document.createRange();
   range.selectNode(document.getElementById(containerid));
   window.getSelection().addRange(range);
   document.execCommand("copy");
   alert("text copied")
   }}

También en html,

<button id="button1" onclick="CopyToClipboard(''div1'')">Click to copy</button>
<div id="div1" >Text To Copy </div>
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

2. JQUERY:

paulund.co.uk/jquery-copy-clipboard

Answer 2

Ambos trabajarán a la perfección :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("text copied")
}}

También en html,

<button id="button1" onclick="CopyToClipboard(''div1'')">Click to copy</button>
<div id="div1" >Text To Copy </div>
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: paulund.co.uk/jquery-copy-clipboard

Answer 3

El texto a copiar está en el ingreso de texto, como: <input type="text" id="copyText" name="copyText"> y, al hacer clic en el botón de arriba, el texto debe copiarse al portapapeles, así que el botón es como: <button type="submit" id="copy_button" data-clipboard-target=''copyText''>Copy</button> Su script debe ser como:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>

Para archivos CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

nota : el archivo ZeroClipboard.swf y ZeroClipboard.js "debe estar en la misma carpeta que su archivo usando esta funcionalidad, O debe incluir como incluimos <script src=""></script> en nuestras páginas.

Answer 4

Es un método más simple para copiar el contenido.

 <div id="content"> Lorepm ispum </div>
<button class="copy" title="content">Copy Sorce</button>
function SelectContent(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand(''Copy'');
}
$(".copy").click(function(){
SelectContent( $(this).attr(''title''));
});

Answer 5

Hay otra forma no Flash (aparte de la API del Portapapeles mencionada en la respuesta de jfriend00 ). Debe seleccionar el texto y luego ejecutar la copy del comando para copiar al portapapeles, independientemente del texto seleccionado actualmente en la página.

Por ejemplo, esta función copiará el contenido del elemento pasado en el portapapeles (actualizado con sugerencias en los comentarios de PointZeroTwo ):

function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

Así es como funciona:

1. Crea un campo de texto oculto temporal.
2. Copia el contenido del elemento en ese campo de texto.
3. Selecciona el contenido del campo de texto.
4. Ejecuta la copia del comando como: document.execCommand("copy") .
5. Elimina el campo de texto temporal.

Puedes ver una demostración rápida aquí:

function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard(''#p1'')">Copy P1</button>
<button onclick="copyToClipboard(''#p2'')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

El problema principal es que no todos los navegadores son compatibles con esta función en este momento, pero puede usarla en los principales desde:

• Cromo 43
• Internet Explorer 10
• Firefox 41
• Safari 10

Actualización 1: Esto también se puede lograr con una solución de JavaScript puro (sin jQuery):

function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}

<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard(''p1'')">Copy P1</button>
<button onclick="copyToClipboard(''p2'')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Observe que pasamos la identificación sin el # ahora.

Como informó madzohan en los comentarios a continuación, hay algunos problemas extraños con la versión de 64 bits de Google Chrome en algunos casos (ejecutar el archivo localmente). Este problema parece solucionarse con la solución no jQuery anterior.

Madzohan probó en Safari y la solución funcionó, pero usó document.execCommand(''SelectAll'') lugar de usar .select() (como se especifica en el chat y en los comentarios a continuación).

Como PointZeroTwo , el código podría mejorarse para que devolviera un resultado de éxito / fracaso. Puedes ver una demo en este jsFiddle .

ACTUALIZACIÓN: COPIAR GUARDANDO EL FORMATO DE TEXTO

Como señaló un usuario en la versión en español de , las soluciones enumeradas anteriormente funcionan perfectamente si desea copiar el contenido de un elemento literalmente, pero no funcionan tan bien si desea pegar el texto copiado con formato (como se copia en un input type="text" , el formato se "pierde").

Una solución para eso sería copiar en un div editable de contenido y luego copiarlo usando execCommand de una manera similar. Aquí hay un ejemplo: haga clic en el botón Copiar y luego pegue en el cuadro editable del contenido a continuación:

function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand(''selectAll'',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}

#target {
width:400px;
height:100px;
border:1px solid #ccc;
}

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy(''demo'')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>

Y en jQuery, sería así:

function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand(''selectAll'',false,null) })
.focus();
document.execCommand("copy");
$temp.remove();
}

#target {
width:400px;
height:100px;
border:1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy(''#demo'')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>

Answer 6

Incluso el mejor enfoque sin flash o cualquier otro requisito es clipboard.js . Todo lo que necesita hacer es agregar data-clipboard-target="#toCopyElement" en cualquier botón, inicializarlo en el new Clipboard(''.btn''); y copiará el contenido de DOM con id en toCopyElement al portapapeles. Este es un fragmento que copia el texto proporcionado en su pregunta a través de un enlace.

Sin embargo, una limitación es que no funciona en safari, pero funciona en todos los demás navegadores, incluidos los navegadores móviles, ya que no utiliza flash.

$(function(){
new Clipboard(''.copy-text'');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s</p>
<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>

Answer 7

La mayoría de las respuestas propuestas crean un elemento (s) de entrada oculto temporal adicional. Debido a que la mayoría de los navegadores de hoy en día admiten la edición de contenido div, propongo una solución que no crea elementos ocultos, conserva el formato de texto y usa la biblioteca jQuery o JavaScript puro.

Aquí hay una implementación de esqueleto minimalista que utiliza la menor cantidad de líneas de códigos que podría pensar:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
copyUsingPureJS(document.getElementById("copyTarget"));
alert("Text Copied to Clipboard Using Pure Javascript");
});
function copyUsingPureJS(element_id) {
element_id.setAttribute("contentEditable", true);
element_id.setAttribute("onfocus", "document.execCommand(''selectAll'',false,null)");
element_id.focus();
document.execCommand("copy");
element_id.removeAttribute("contentEditable");
}
//Jquery:
$(document).ready(function() {
$("#copyUsingJquery").click(function() {
copyUsingJquery("#copyTarget");
});
function copyUsingJquery(element_id) {
$(element_id).attr("contenteditable", true)
.select()
.on("focus", function() {
document.execCommand(''selectAll'', false, null)
})
.focus()
document.execCommand("Copy");
$(element_id).removeAttr("contenteditable");
alert("Text Copied to Clipboard Using jQuery");
}
});

#copyTarget {
width: 400px;
height: 400px;
border: 1px groove gray;
color: navy;
text-align: center;
box-shadow: 0 4px 8px 0 gray;
}
#copyTarget h1 {
color: blue;
}
#copyTarget h2 {
color: red;
}
#copyTarget h3 {
color: green;
}
#copyTarget h4 {
color: cyan;
}
#copyTarget h5 {
color: brown;
}
#copyTarget h6 {
color: teal;
}
#pasteTarget {
width: 400px;
height: 400px;
border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<strong>Preserve <em>formatting</em></strong>
<br/>
</div>
<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

Answer 8

Simplicidad es la máxima sofisticación.
Si no quieres que el texto a copiar sea visible:

jQuery:

$(''button.copyButton'').click(function(){
$(this).siblings(''input.linkToCopy'').select();
document.execCommand("copy");
});

HTML:

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;"><input>

Answer 9

código html aquí

 <input id="result" style="width:300px"/>some example text
<button onclick="copyToClipboard(''result'')">Copy P1</button>
<input type="text" style="width:400px" placeholder="Paste here for test" />

CÓDIGO JS:

 function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).value);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}

Answer 10

jQuery solución simple.

Debe ser activado por el clic del usuario.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
document.execCommand(''copy'');
}).remove();

Answer 11

clipboard.js es una utilidad agradable que permite copiar texto o datos HTML al portapapeles sin usar Flash. 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 .

Edite el 15 de enero de 2016: la respuesta principal se editó hoy para hacer referencia a la misma API en mi respuesta publicada en agosto de 2015. El texto anterior instruía a los usuarios a usar ZeroClipboard. Solo quiero dejar en claro que no eliminé esto de la respuesta de jfriend00, sino al revés.

Answer 12

Clipboard-polyfill library es un polyfill para la moderna API de portapapeles asíncrona basada en Promise.

instalar en CLI:

npm install clipboard-polyfill

Importar como portapapeles en archivo JS

window.clipboard = require(''clipboard-polyfill'');

example

Lo estoy usando en un paquete con require("babel-polyfill"); y lo probé en cromo 67. Todo bueno para la producción.

Answer 13

Con saltos de línea (extensión de la respuesta de Álvaro Montoro)

var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with /n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
ClipboardHelper.copyText(''Hello/nWorld'');
ClipboardHelper.copyElement($(''body h1'').first());

Answer 14

Edición a partir de 2016

A partir de 2016, ahora puede copiar texto en el portapapeles en la mayoría de los navegadores porque la mayoría de los navegadores tienen la capacidad de copiar mediante programación una selección de texto en el portapapeles utilizando document.execCommand("copy") que funciona a partir de una selección.

Al igual que con algunas otras acciones en un navegador (como abrir una nueva ventana), la copia al portapapeles solo se puede realizar a través de una acción específica del usuario (como un clic del mouse). Por ejemplo, no se puede hacer a través de un temporizador.

Aquí hay un ejemplo de código:

document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn''t already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}

input {
width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Aquí hay una demostración más avanzada: https://jsfiddle.net/jfriend00/v9g1x0o6/

Y también puede obtener una biblioteca preconstruida que hace esto por usted con clipboard.js .

Parte antigua, histórica de la respuesta.

Copiar directamente al portapapeles a través de JavaScript no está permitido por ningún navegador moderno por razones de seguridad. La solución más común es usar una capacidad de Flash para copiar en el portapapeles que solo se puede activar con un clic directo del usuario.

Como ya se mencionó, zeroclipboard.org es un conjunto popular de código para administrar el objeto Flash para hacer la copia. Lo he usado Si Flash está instalado en el dispositivo de navegación (lo que descarta el dispositivo móvil o tableta), funciona.

La siguiente alternativa más común es colocar el texto delimitado por el portapapeles en un campo de entrada, mover el foco a ese campo y recomendar al usuario que presione Ctrl + C para copiar el texto.

Se pueden encontrar otras discusiones sobre el problema y posibles soluciones en estas publicaciones anteriores de Desbordamiento de pila:

• ¿Cómo copio al portapapeles en JavaScript?

• ¿Cómo copiar texto al portapapeles del cliente utilizando jQuery?

• ¿Cómo se puede copiar al portapapeles sin flash?

Estas preguntas que piden una alternativa moderna al uso de Flash han recibido muchas preguntas y no respuestas con una solución (probablemente porque no existe):

• ¿Alternativa de HTML5 al ZeroClipboard basado en flash para copiar de forma segura los datos al portapapeles?

• Copia al portapapeles sin flash

Internet Explorer y Firefox solían tener API no estándar para acceder al portapapeles, pero sus versiones más modernas han dejado de lado esos métodos (probablemente por razones de seguridad).

Hay un esfuerzo incipiente de estándares para tratar de encontrar una manera "segura" de resolver los problemas más comunes del portapapeles (que probablemente requieran una acción específica del usuario como requiere la solución Flash), y parece que puede implementarse parcialmente en la última versión. Versiones de Firefox y Chrome, pero no lo he confirmado todavía.

Answer 15

Puedes usar esta biblioteca para realizar fácilmente el objetivo de la copia.

clipboard.js

Copiar texto en el portapapeles no debería ser difícil. No debe requerir docenas de pasos para configurar o cientos de KB para cargar. Pero sobre todo, no debería depender de Flash ni de ningún marco inflado.

Es por eso que existe clipboard.js.

o

https://github.com/zeroclipboard/zeroclipboard

zeroclipboard.org

La biblioteca ZeroClipboard proporciona una manera fácil de copiar texto al portapapeles utilizando una película invisible de Adobe Flash y una interfaz de JavaScript.

Answer 16

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/index.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script>
function copy()
{
try
{
$(''#txt'').select();
document.execCommand(''copy'');
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<h4 align="center">Copy your code</h4>
<textarea id="txt" style="width:100%;height:300px;"></textarea>
<br /><br /><br />
<div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

Answer 17

<div class="form-group">
<label class="font-normal MyText">MyText to copy</label>&nbsp;
<button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>
$(".btnCopy").click(function () {
var element = $(this).attr("data");
copyToClipboard($(''.'' + element));
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}