En este artículo aprenderemos cómo implementar la función de copiar mediante JavaScript.
Método 1: Usar código JavaScript simple
Podemos usar el método de la API de ClipboardClipboard.writeText()oClipboard.write()para sobrescribir el contenido del portapapeles con los datos especificados.
Ejemplo
function myFunction() {
/* Obtener el contenido del texto */
var copyText = document.getElementById("myInput");
/* Seleccionar el contenido a copiar */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Configuración para dispositivos móviles */
/* Copiar contenido al área de texto */
navigator.clipboard.writeText(copyText.value);
/* Mostrar el contenido copiado */
alert("El texto copiado es: " + copyText.value);
}
/* Obtener el contenido del texto */
var copyText = document.getElementById("myInput");
/* Seleccionar el contenido a copiar */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Configuración para dispositivos móviles */
/* Copiar contenido al área de texto */
navigator.clipboard.writeText(copyText.value);
/* Mostrar el contenido copiado */
alert("El texto copiado es: " + copyText.value);
}
Pruébalo »
Después de completar la copia, se puede usar una forma más amigable de avisar:
Ejemplo
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Contenido copiado: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Haz clic en el botón para copiar";
}
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Contenido copiado: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "Haz clic en el botón para copiar";
}
Pruébalo »
Método 2: Usar la biblioteca de terceros clipboard.js (recomendado, alta compatibilidad)
-
Sitio web oficial de clipboard.js:https://clipboardjs.com/
clipboard.js Github：https://github.com/zenorocha/clipboard.js
Podemos descargar clipboard.js e importarlo en el proyecto:
<script src="dist/clipboard.min.js.html"></script>
Por supuesto, lo más sencillo es usar directamente una biblioteca CDN nacional:
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
Ejemplo
new ClipboardJS('#copyInput', {
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("¡¡¡Copia exitosa!!!");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("¡¡¡Copia exitosa!!!");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
Pruébalo »
Compatibilidad de clipboard.js con los navegadores
