Cortar y copiar comandos

IE10 y versiones posteriores agregaron compatibilidad con los comandos "cortar" y "copiar" a través del método Document.execCommand(). A partir de la versión 43 de Chrome, estos comandos también son compatibles con Chrome.

Cualquier texto seleccionado en el navegador cuando se ejecute uno de estos comandos se cortará o copiará en el portapapeles del usuario. Esto te permite ofrecerle al usuario una forma simple de seleccionar una parte de texto y copiarla en el portapapeles.

Esto se vuelve muy útil cuando lo combinas con la API de Selection para seleccionar texto de forma programática y determinar qué se copia en el portapapeles, lo que analizaremos con más detalle más adelante en este artículo.

Ejemplo simple

A modo de ejemplo, agreguemos un botón que copie una dirección de correo electrónico al portapapeles del usuario.

Agregamos la dirección de correo electrónico en nuestro código HTML con un botón para iniciar la copia cuando se hace clic en él:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

Luego, en nuestro código JavaScript, queremos agregar un controlador de eventos de clic a nuestro botón en el que seleccionamos el texto de la dirección de correo electrónico del ancla js-emaillink, ejecutamos un comando de copia para que la dirección de correo electrónico esté en el portapapeles del usuario y, luego, anula la selección de la dirección de correo electrónico para que el usuario no vea que se produce la selección.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
    } catch(err) {
    console.log('Oops, unable to copy');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

Lo que hacemos aquí es usar un método de la API de Selection, window.getSelection(), para establecer de forma programática la "selección" de texto en el ancla, que es el texto que queremos copiar en el portapapeles del usuario. Después de llamar a document.execCommand(), podemos quitar la selección llamando a window.getSelection().removeAllRanges(). Si quieres confirmar que todo funcionó como se esperaba, puedes examinar la respuesta de document.execCommand(); muestra un valor falso si el comando no es compatible o no está habilitado. Unimos execCommand() en un try y catch, ya que los comandos "cortar" y "copiar" pueden generar un error en algunas situaciones.

El comando "cortar" se puede usar para campos de texto en los que deseas quitar el contenido de texto y permitir el acceso a través del portapapeles.

Con un textarea y un botón en nuestro código HTML:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

Podemos hacer lo siguiente para cortar el contenido:

var cutTextareaBtn = document.querySelector('.js-textareacutbtn');

cutTextareaBtn.addEventListener('click', function(event) {
    var cutTextarea = document.querySelector('.js-cuttextarea');
    cutTextarea.select();

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

queryCommandSupported y queryCommandEnabled

Antes de llamar a document.execCommand(), debes asegurarte de que esta API sea compatible con el método document.queryCommandSupported(). En nuestro ejemplo anterior, podríamos establecer el estado inhabilitado del botón según la compatibilidad de la siguiente manera:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

La diferencia entre document.queryCommandSupported() y document.queryCommandEnabled() es que un navegador podría admitir cortar y copiar, pero si no se selecciona texto en ese momento, no se habilitarán. Esto es útil en situaciones en las que no configuras la selección de texto de forma programática y deseas asegurarte de que el comando funcione como se espera; de lo contrario, presenta un mensaje al usuario.

Navegadores compatibles

IE 10 y versiones posteriores, Chrome 43 y versiones posteriores, Firefox 41 y versiones posteriores, y Opera 29 y versiones posteriores admiten estos comandos.

Safari no admite estos comandos.

Errores conocidos