Cortar y copiar comandos

En IE10 y versiones posteriores, se agregó compatibilidad con la función para cortar. y "copiar" mediante la 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 sencilla para seleccionar una parte del texto y copiarla en el portapapeles.

Esto resulta muy útil cuando se combina con la API de selección para seleccionar texto de forma programática para determinar lo que se copia en el portapapeles, lo que veremos 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 al portapapeles del usuario.

Agregamos la dirección de correo electrónico a 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 JavaScript, agregaremos un controlador de eventos de clic a nuestro botón en seleccionamos el texto de la dirección de correo electrónico del ancla js-emaillink, ejecutamos una 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 seleccionó.

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 haremos aquí es usar un método de la API de selección, window.getSelection() para establecer la selección de manera programática de texto al ancla, que es el texto que desea copiar en el portapapeles del usuario. Después de llamar a document.execCommand(), puede quitar la selección llamando window.getSelection().removeAllRanges() Si quieres confirmar que todo funcionó según lo esperado, puedes examinar el respuesta de document.execCommand(); el resultado es falso si el comando no es compatible o habilitado. Unimos execCommand() con un try y catch, ya que el comando y "copiar" comandos pueden arrojar un error en algunos casos.

El "corte" “kubectl” se puede usar en los campos de texto en los que quieres quitar el texto contenido y permitir que se pueda acceder a él a través del portapapeles.

Con un área de texto 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 esté compatibles con document.queryCommandSupported() . En el ejemplo anterior, podríamos configurar el estado inhabilitado del botón según soporte de esta manera:

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

La diferencia entre document.queryCommandSupported() y document.queryCommandEnabled() es que cortar y copiar puede ser compatible con un navegador, pero si no hay texto seleccionado actualmente, no se habilitarán. Esto es útil en situaciones en las que no configura la selección de texto de forma programática y quieres asegurarte de que el comando hará lo que se espera; 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