Befehle zum Ausschneiden und Kopieren

Matt Gaunt
X Startseite

In IE 10 und höher werden die Befehle "cut" und "copy" über die Methode Document.execCommand() unterstützt. Ab Chrome-Version 43 werden diese Befehle auch in Chrome unterstützt.

Bei Ausführung eines dieser Befehle im Browser ausgewählter Text wird ausgeschnitten oder in die Zwischenablage des Nutzers kopiert. So können Nutzende einen Teil des Textes einfach auswählen und in die Zwischenablage kopieren.

Dies ist besonders nützlich, wenn Sie sie mit der Selection API kombinieren, um Text programmatisch auszuwählen und so zu bestimmen, was in die Zwischenablage kopiert wird. Dies wird später in diesem Artikel ausführlicher behandelt.

Einfaches Beispiel

Fügen wir zum Beispiel eine Schaltfläche hinzu, mit der eine E-Mail-Adresse in die Zwischenablage des Nutzers kopiert wird.

Die E-Mail-Adresse wird in die HTML-Datei mit einer Schaltfläche eingefügt, mit der der Kopiervorgang gestartet wird, wenn ein Nutzer darauf klickt:

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

Anschließend fügen wir in unserem JavaScript einen Klick-Event-Handler zu unserer Schaltfläche hinzu, in der wir den Text der E-Mail-Adresse aus dem js-emaillink-Anker auswählen, einen Kopierbefehl ausführen, sodass sich die E-Mail-Adresse in der Zwischenablage des Nutzers befindet, und dann die Auswahl der E-Mail-Adresse aufheben, damit der Nutzer die Auswahl nicht sieht.

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

Hier verwenden wir eine Methode der Selection API, window.getSelection(), um die "Auswahl" von Text programmatisch auf den Anker festzulegen. Dies ist der Text, den wir in die Zwischenablage des Nutzers kopieren möchten. Nach dem Aufrufen von „document.execCommand()“ können wir die Auswahl durch Aufrufen von window.getSelection().removeAllRanges() entfernen. Wenn Sie überprüfen möchten, ob alles wie erwartet funktioniert, können Sie die Antwort von „document.execCommand()“ prüfen. Sie gibt „false“ zurück, wenn der Befehl nicht unterstützt oder aktiviert wird. Wir packen execCommand() in einen Versuch und Catch, da die Befehle „cut“ und „copy“ in einigen Szenarien einen Fehler auslösen können.

Der Befehl „cut“ kann für Textfelder verwendet werden, in denen Sie den Textinhalt entfernen und über die Zwischenablage zugänglich machen möchten.

Verwendung eines Textbereichs und einer Schaltfläche in unserem HTML-Code:

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

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

So schneiden Sie den Inhalt ab:

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

Bevor Sie document.execCommand() aufrufen, sollten Sie prüfen, ob diese API durch die Methode document.queryCommandSupported() unterstützt wird. In unserem Beispiel oben könnten wir den Status der Schaltfläche deaktiviert basierend auf der Unterstützung so festlegen:

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

Der Unterschied zwischen document.queryCommandSupported() und document.queryCommandEnabled() besteht darin, dass das Ausschneiden und Kopieren von einem Browser unterstützt werden kann, aber wenn derzeit kein Text ausgewählt ist, werden sie nicht aktiviert. Das ist nützlich, wenn Sie die Textauswahl nicht programmatisch festlegen und sicherstellen möchten, dass der Befehl wie erwartet funktioniert. Andernfalls wird dem Nutzer eine Nachricht angezeigt.

Unterstützte Browser

IE 10+, Chrome 43+, Firefox 41+ und Opera 29+ unterstützen diese Befehle.

Safari unterstützt diese Befehle nicht.

Bekannte Fehler