Cortar y copiar comandos

IE10 y las versiones posteriores agregaron compatibilidad con los comandos “cut” y “copy” 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 ofrecer al usuario una manera sencilla de seleccionar una parte del texto y copiarlo en el portapapeles.

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

Ejemplo simple

Por ejemplo, agreguemos un botón que copie una dirección de correo electrónico en el 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 él, seleccionamos el texto de la dirección de correo electrónico del anclaje js-emaillink, ejecutamos un comando de copia para que la dirección de correo electrónico esté en el portapapeles del usuario y, luego, anulamos la selección de la dirección de correo electrónico para que el usuario no vea 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 selección, window.getSelection(), para establecer de manera programática la "selección" del 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 deseas confirmar que todo funcionó como se esperaba, puedes examinar la respuesta de document.execCommand(). Muestra el valor falso si el comando no se admite o no está habilitado. Unimos execCommand() con el propósito de detectarlo, ya que los comandos “cut” y “copy” pueden generar un error en algunas situaciones.

El comando “cut” se puede usar para los campos de texto en los que deseas quitar el contenido de texto y permitir que se pueda acceder a él a través del portapapeles.

Mediante un área de texto y un botón en nuestro 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 configurar 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 el corte y la copia podrían ser compatibles con un navegador, pero si no hay texto seleccionado, no se habilitarán. Esto es útil en situaciones en las que no configuras la selección de texto de manera programática y quieres asegurarte de que el comando funcione como se espera; de lo contrario, le presentará un mensaje al usuario.

Navegadores compatibles

IE 10 y versiones posteriores, Chrome 43 y versiones posteriores, Firefox 41 y Opera 29 y versiones posteriores son compatibles con estos comandos.

Safari no admite estos comandos.

Errores conocidos