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. Cela vous permet de 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

Pour le saké, 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 allons ajouter un gestionnaire d'événements de clic à notre bouton. Nous sélectionnerons le texte de l'adresse e-mail à partir de l'ancre js-emaillink, exécuterons une commande de copie pour que l'adresse e-mail figure dans le presse-papiers de l'utilisateur, puis désélectionnons l'adresse e-mail pour 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 a fonctionné comme prévu, vous pouvez examiner la réponse de document.execCommand(), qui renvoie la valeur "false" si la commande n'est pas compatible ou 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 textarea 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 pourrions définir l'état du bouton désactivé en fonction de la compatibilité, comme ceci:

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 ne prend pas en charge ces commandes.

Bugs connus