Commandes "Couper" et "Copier"

IE10 et versions ultérieures ont ajouté la prise en charge des commandes "cut" et "copy" 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 lors de l'exécution de l'une de ces commandes sera coupé ou copié dans le presse-papiers de l'utilisateur. Cela vous permet d'offrir à l'utilisateur un moyen simple de sélectionner une partie du texte et de la copier dans le presse-papiers.

Cela s'avère extrêmement utile lorsque vous le combinez avec l'API Selection pour sélectionner par programmation du texte et déterminer ce qui est copié dans le presse-papiers. Nous y reviendrons 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 lorsque l'utilisateur clique dessus:

<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 voulons ajouter un gestionnaire d'événements de clic à notre bouton pour sélectionner le texte de l'adresse e-mail dans l'ancre js-emaillink, exécuter une commande de copie afin que l'adresse e-mail se trouve dans le presse-papiers de l'utilisateur, puis désélectionner 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();
});

Nous utilisons ici une méthode de l'API Selection, window.getSelection(), pour définir par programmation la "sélection" du texte sur l'ancre, qui est le texte à 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 encapsulons execCommand() dans une try and catch, car les commandes "cut" et "copy" peuvent générer une erreur dans certains cas.

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

Utilisation d'une zone de texte et d'un bouton dans notre 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 l'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 couper et la copie peuvent être pris en charge par un navigateur, mais si aucun texte n'est actuellement sélectionné, ils ne seront pas activés. Cela est utile lorsque vous ne définissez pas la sélection de texte par programmation et que vous souhaitez vous assurer que la commande fonctionnera comme prévu, sinon un message sera présenté à l'utilisateur.

Navigateurs pris en charge

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

Ces commandes ne sont pas compatibles avec Safari.

Bugs connus