Commandes "Couper" et "Copier"

IE10 et versions ultérieures prennent en charge les commandes "couper" et "copier" via la méthode Document.execCommand(). Depuis la version 43 de Chrome, ces commandes sont également compatibles avec Chrome.

Tout texte sélectionné dans le navigateur lorsque l'une de ces commandes est exécutée est coupé ou copié dans le presse-papiers de l'utilisateur. Vous pouvez ainsi proposer à l'utilisateur un moyen simple de sélectionner une partie de texte et de la copier dans le presse-papiers.

Cette fonctionnalité est extrêmement utile lorsque vous la combinez à l'API Selection pour sélectionner du texte de manière programmatique afin de déterminer ce qui est copié dans le presse-papiers, ce que nous verrons plus en détail plus loin dans cet article.

Exemple simple

Par exemple, ajoutons un bouton qui copie une adresse e-mail dans le presse-papiers de l'utilisateur.

Nous ajoutons l'adresse e-mail dans notre code HTML avec un bouton pour lancer la copie lorsqu'il est cliqué:

<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>

Ensuite, dans notre code JavaScript, nous souhaitons ajouter un gestionnaire d'événements de clic à notre bouton dans lequel nous sélectionnons le texte de l'adresse e-mail à partir de l'ancre js-emaillink, exécutons une commande de copie afin que l'adresse e-mail se trouve dans le presse-papiers de l'utilisateur, puis désélectionnons l'adresse e-mail afin que l'utilisateur ne voie pas la sélection.

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();
});

Ici, nous utilisons une méthode de l'API Selection, window.getSelection(), pour définir de manière programmatique la "sélection" de texte sur l'ancre, qui est le texte que nous souhaitons copier dans le presse-papiers de l'utilisateur. Après avoir appelé document.execCommand(), nous pouvons supprimer la sélection en appelant window.getSelection().removeAllRanges(). Si vous souhaitez vérifier que tout fonctionne comme prévu, vous pouvez examiner la réponse de document.execCommand(); elle renvoie la valeur "false" si la commande n'est pas prise en charge ou si elle n'est pas activée. Nous encapsulerons execCommand() dans une instruction try and catch, car les commandes "cut" et "copy" peuvent générer une erreur dans certains scénarios.

La commande "couper" peut être utilisée pour les champs de texte dans lesquels vous souhaitez supprimer le contenu textuel et le rendre accessible via le presse-papiers.

Utilisation d'un champ de texte et d'un bouton dans le code HTML:

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

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

Nous pouvons procéder comme suit pour couper le contenu:

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 et queryCommandEnabled

Avant d'appeler document.execCommand(), vous devez vous assurer que cette API est compatible à l'aide de la méthode document.queryCommandSupported(). Dans notre exemple ci-dessus, nous pouvons définir l'état de désactivation du bouton en fonction de la prise en charge comme suit:

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

La différence entre document.queryCommandSupported() et document.queryCommandEnabled() est que le navigateur peut prendre en charge la coupe et la copie, mais si aucun texte n'est actuellement sélectionné, elles ne seront pas activées. Cela est utile lorsque vous ne définissez pas la sélection de texte de manière programmatique et que vous souhaitez vous assurer que la commande fonctionnera comme prévu. Sinon, un message s'affichera à l'utilisateur.

Navigateurs pris en charge

Ces commandes sont compatibles avec IE 10 ou version ultérieure, Chrome 43 ou version ultérieure, Firefox 41 ou version ultérieure et Opera 29 ou version ultérieure.

Safari n'est pas compatible avec ces commandes.

Bugs connus