Knip- en kopieeropdrachten

IE10 en hoger hebben ondersteuning toegevoegd voor de opdrachten 'knippen' en 'kopiëren' via de methode Document.execCommand() . Vanaf Chrome-versie 43 worden deze opdrachten ook ondersteund in Chrome.

Elke tekst die in de browser wordt geselecteerd wanneer een van deze opdrachten wordt uitgevoerd, wordt geknipt of gekopieerd naar het klembord van de gebruiker. Hiermee kunt u de gebruiker op een eenvoudige manier een gedeelte van de tekst selecteren en naar het klembord kopiëren.

Dit wordt uiterst handig wanneer u het combineert met de Selectie-API om programmatisch tekst te selecteren om te bepalen wat er naar het klembord wordt gekopieerd, waar we later in dit artikel meer in detail naar zullen kijken.

Eenvoudig voorbeeld

Laten we bijvoorbeeld een knop toevoegen die een e-mailadres naar het klembord van de gebruiker kopieert.

We voegen het e-mailadres toe aan onze HTML met een knop om het kopiëren te starten wanneer erop wordt geklikt:

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

Vervolgens willen we in ons JavaScript een klikgebeurtenishandler aan onze knop toevoegen waarin we de e-mailadrestekst uit het js-emaillink anker selecteren, een kopieeropdracht uitvoeren zodat het e-mailadres op het klembord van de gebruiker staat en vervolgens deselecteren we de e-mailadres zodat de gebruiker de selectie niet ziet plaatsvinden.

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

Wat we hier doen is een methode van de Selection API gebruiken, window.getSelection() om de 'selectie' van tekst programmatisch in te stellen op het anker, de tekst die we naar het klembord van de gebruiker willen kopiëren. Na het aanroepen van document.execCommand() kunnen we de selectie verwijderen door window.getSelection().removeAllRanges() aan te roepen. Als u wilt bevestigen dat alles naar verwachting heeft gewerkt, kunt u het antwoord van document.execCommand(); het retourneert false als de opdracht niet wordt ondersteund of ingeschakeld. We verpakken execCommand() in een try-and-catch-opdracht, omdat de opdrachten 'cut' en 'copy' in een aantal scenario's een fout kunnen opleveren .

Het commando 'knippen' kan worden gebruikt voor tekstvelden waarvan u de tekstinhoud wilt verwijderen en toegankelijk wilt maken via het klembord.

Met behulp van een tekstgebied en een knop in onze HTML:

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

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

We kunnen het volgende doen om de inhoud te knippen: 

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

Voordat u document.execCommand() aanroept, moet u ervoor zorgen dat deze API wordt ondersteund met behulp van de document.queryCommandSupported() -methode. In ons voorbeeld hierboven kunnen we de uitgeschakelde status van de knop als volgt instellen op basis van ondersteuning:

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

Het verschil tussen document.queryCommandSupported() en document.queryCommandEnabled() is dat knippen en kopiëren door een browser kan worden ondersteund, maar als er momenteel geen tekst is geselecteerd, worden deze niet ingeschakeld. Dit is handig in scenario's waarin u de tekstselectie niet programmatisch instelt en er zeker van wilt zijn dat de opdracht werkt zoals verwacht, anders wordt er een bericht aan de gebruiker gepresenteerd.

Browserondersteuning

IE 10+, Chrome 43+, Firefox 41+ en Opera 29+ ondersteunen deze opdrachten.

Safari ondersteunt deze opdrachten niet.

Bekende bugs