Cortar y copiar comandos

En IE10 y versiones posteriores, se agregó 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 ofrecerle al usuario una forma simple de seleccionar una parte de texto y copiarla en el portapapeles.

Esto resulta muy útil cuando se combina con la API de selección para seleccionar texto de manera programática y determinar lo que se copia en el portapapeles, algo que veremos con más detalle más adelante en este artículo.

Ejemplo simple

Por ejemplo, agregaremos 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 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() con un try y catch, ya que los comandos "cut" y "copy" pueden arrojar 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 manera programática y quieres asegurarte de que el comando haga lo esperado o, de lo contrario, presentará un mensaje al usuario.

Navegadores compatibles

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

Safari no admite estos comandos.

Errores conocidos