Tutorial Como Copiar Cortar y Pegar Contenidos

Inicio Libros Tutoriales Eventos Foro Buscar
Cmo copiar, cortar y pegar

contenidos en el portapapeles
con JavaScript
El navegador Internet Explorer 10 fue el primero que aadi soporte para "copiar y
pegar" contenidos mediante el mtodo Document.execCommand() de JavaScript. El resto
de navegadores tambin han aadido soporte para esta funcionalidad, como por
ejemplo Google Chrome, que lo soporta desde la versin 43.
Gracias a esta funcionalidad, cualquier texto seleccionado en el navegador se puede

cortar o copiar en el portapapeles. Combinndola con otras tcnicas, como la API
Selection de JavaScript, puedes crear un botn llamado Copiar para copiar al
portapapeles cualquier contenido de una pgina.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Un ejemplo sencillo
Para empezar con un ejemplo sencillo, vamos a crear un botn que copia una direccin
de correo electrnico en el portapapeles. Para ello, crea primero los elementos HTML
que muestran el email y el botn:
<p>
Envame un mensaje a
<a class="email" href="mailto:aaa@ejemplo.com">aaa@ejemplo.com</a>
</p>
<button class="botonCopiar">Copiar</button>
A continuacin aadimos el cdigo JavaScript que responde cuando se pulsa el botn,

selecciona la direccin de email y la copia en el portapapeles:
var boton = document.querySelector('.botonCopiar');
boton.addEventListener('click', function(event) {
// seleccionar el texto de la direccin de email
var email = document.querySelector('.email');
var range = document.createRange();
range.selectNode(email);
window.getSelection().addRange(range);
try {
// intentar copiar el contenido seleccionado
var resultado = document.execCommand('copy');
console.log(resultado ? 'Email copiado' : 'No se pudo copiar el email
');
} catch(err) {
console.log('ERROR al intentar copiar el email');
}
// eliminar el texto seleccionado

window.getSelection().removeAllRanges();
// cuando los navegadores lo soporten, habra
// que utilizar: removeRange(range)
});
En primer lugar, el cdigo anterior utiliza la API Selection a travs del mtodo
window.getSelection() para seleccionar el texto que se va a copiar. Despus se
ejecuta el mtodo document.execCommand() para copiar los contenidos en el
portapapeles. Por ltimo, el mtodo removeAllRanges() hace que el texto del email no
se quede seleccionado despus de copiarlo.
Para asegurarte de que el texto se ha copiado, puedes utilizar el valor devuelto por el
mtodo document.execCommand() , que devuelve false si el navegador no soporta este
mtodo o si el usuario no permite usarlo. Como adems este mtodo puede fallar en
algunas circunstancias especiales, se encierra todo el cdigo en un bloque try ...
catch para capturar los posibles errores..
Adems del comando copy , puedes usar el comando cut para cortar texto de algn
campo de formulario y pasarlo al portapapeles. En el siguiente ejemplo se muestra un
<textarea> con cierto contenido que se va a cortar:
<textarea class="contenido">Hola Mundo</textarea>
<button class="botonCortar" disable>Cortar texto</button>
El siguiente cdigo muestra cmo cortar el texto con JavaScript:
var botonCortar = document.querySelector('.botonCortar');
botonCortar.addEventListener('click', function(event) {
var contenido = document.querySelector('.contenido');
contenido.select();
try {
var resultado = document.execCommand('cut');
console.log(resultado ? 'Contenido cortado' : 'No se pudo cortar el c
ontenido');
} catch(err) {
console.log('ERROR al intentar cortar el contenido');
}
});
Comprobando si el navegador soporta los

comandos de copiar y pegar
Antes de ejecutar el comando document.execCommand() es aconsejable comprobar si el
navegador soporta esta API. Para ello, usa el mtodo
document.queryCommandSupported() . Gracias a este mtodo, en el ejemplo anterior
puedes hacer que el botn est deshabilitado cuando el navegador no permite copiar
contenidos:
botonCopiar.disabled = !document.queryCommandSupported('copy');
La diferencia entre document.queryCommandSupported() y

document.queryCommandEnabled() es que el primero comprueba si el navegador
soporta los mtodos copy y cut , mientras que el segundo comprueba si estn
habilitados (para ello por ejemplo debe haberse seleccionado algn texto previamente).
Este segundo mtodo es til cuando no seleccionas el texto mediante JavaScript sino
que dejas que sea el usuario el que seleccione el texto. En este caso s que puede ser
til dejar el botn deshabilitado hasta que no se haya seleccionado algo.
Soporte en navegadores
Los comandos para copiar y cortar contenidos estn soportados desde las siguientes
versiones de los principales navegadores:
Navegador Versin
Internet Explorer 10+
Google Chrome 43+
Firefox 41+
Opera 29+
Safari (sin soporte)
Sobre el autor
Este artculo fue publicado originalmente por Matt Gaunt y ha sido traducido con
permiso por Javier Eguiluz.
Comentarios
0 Comentarios LibrosWeb
1 Acceder
Ordenar por los mejores

Recomendar 2
open in browser PRO version Compartir
Are you a developer? Try out the HTML to PDF API pdfcrowd.com
Ordenar por los mejores
Recomendar 2 Compartir
S el primero en comentar...
S el primero en comentar.
TAMBIN EN LIBROSWEB
El proceso de rediseo de LibrosWeb.es Cmo organizar bien un proyecto Silex

2 comentarios hace un ao 2 comentarios hace un ao
Evert Cruz Reyes Hola que tal, muy buena tu pagina, Javier Eguiluz Gracias por avisar! Acabo de
y gracias por compartir esta informacin, no tengo corregir esos enlaces.
mucha experiencia y esto me ha sido
Cmo solucionar los errores habituales de Los cdigos de estado de HTTP

Composer 1 comentario hace un ao
1 comentario hace un ao Martha Villacis Excelente post. Felicitaciones muy
Alarmado Cuando no me deja instalar ningun plugin bueno.
que puede ser lo que este pasando
Suscrbete d Aade Disqus a tu sitio web Privacidad
Fecha de publicacin
16 de diciembre de 2015
ETIQUETAS POPULARES
composer css diseo html javascript php programacin sistemas symfony
SUSCRBETE GRATIS
RSS Todos los tutoriales
RSS Tutoriales de diseo
RSS Tutoriales de programacin
3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad
3.756
das online

Tutorial Como Copiar Cortar y Pegar Contenidos

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Como Copiar Cortar y Pegar Contenidos

Uploaded by

Copyright:

Available Formats

Inicio Libros Tutoriales Eventos Foro Buscar

Cmo copiar, cortar y pegar

Gracias a esta funcionalidad, cualquier texto seleccionado en el navegador se puede

A continuacin aadimos el cdigo JavaScript que responde cuando se pulsa el botn,

var boton = document.querySelector('.botonCopiar');

// eliminar el texto seleccionado

<textarea class="contenido">Hola Mundo</textarea>

<button class="botonCortar" disable>Cortar texto</button>

El siguiente cdigo muestra cmo cortar el texto con JavaScript:

var botonCortar = document.querySelector('.botonCortar');

Comprobando si el navegador soporta los

La diferencia entre document.queryCommandSupported() y

Google Chrome 43+

Safari (sin soporte)

Ordenar por los mejores

El proceso de rediseo de LibrosWeb.es Cmo organizar bien un proyecto Silex

Cmo solucionar los errores habituales de Los cdigos de estado de HTTP

Suscrbete d Aade Disqus a tu sitio web Privacidad

RSS Tutoriales de diseo

RSS Tutoriales de programacin

You might also like