Befehle zum Ausschneiden und Kopieren

Matt Gaunt
X Startseite

In IE 10 und höher wurden die Befehle „Ausschneiden“ und „Kopieren“ über die Methode Document.execCommand() unterstützt. Ab Chrome-Version 43 werden diese Befehle auch in Chrome unterstützt.

Text, der beim Ausführen eines dieser Befehle im Browser ausgewählt ist, wird ausgeschnitten oder in die Zwischenablage des Nutzers kopiert. So können Sie Nutzern eine einfache Möglichkeit bieten, einen Textabschnitt auszuwählen und in die Zwischenablage zu kopieren.

Dies ist besonders nützlich, wenn Sie es mit der Selection API kombinieren, um Text programmatisch auszuwählen und so zu bestimmen, was in die Zwischenablage kopiert wird. Darauf werden wir später in diesem Artikel genauer eingehen.

Einfaches Beispiel

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

Wir fügen die E-Mail-Adresse in unseren HTML-Code mit einer Schaltfläche hinzu, um den Kopiervorgang zu starten, wenn darauf geklickt wird:

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

Dann fügen wir in unserem JavaScript der Schaltfläche einen Click-Event-Handler hinzu, in dem wir den Text der E-Mail-Adresse aus dem Anker js-emaillink 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();
});

Wir verwenden hier eine Methode der Selection API, window.getSelection(), um die Textauswahl programmatisch auf den Anker zu setzen, also den Text, den wir in die Zwischenablage des Nutzers kopieren möchten. Nachdem wir document.execCommand() aufgerufen haben, können wir die Auswahl entfernen, indem wir window.getSelection().removeAllRanges() aufrufen. Wenn Sie prüfen möchten, ob alles wie erwartet funktioniert hat, können Sie die Antwort von document.execCommand() prüfen. Diese gibt „falsch“ zurück, wenn der Befehl nicht unterstützt oder aktiviert ist. Wir setzen execCommand() in einen try-catch-Block, da die Befehle „cut“ und „copy“ in einigen Fällen einen Fehler auslösen können.

Der Befehl „cut“ kann für Textfelder verwendet werden, in denen der Textinhalt entfernt und über die Zwischenablage zugänglich gemacht werden soll.

Wir verwenden ein Textfeld und eine 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 können wir den Inhalt ausschneiden:

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 dafür sorgen, dass diese API mithilfe der Methode document.queryCommandSupported() unterstützt wird. In unserem Beispiel oben könnten wir den Status „Deaktiviert“ der Schaltfläche basierend auf der Unterstützung so festlegen:

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

Der Unterschied zwischen document.queryCommandSupported() und document.queryCommandEnabled() besteht darin, dass „Ausschneiden“ und „Kopieren“ zwar von einem Browser unterstützt werden können, aber nicht aktiviert sind, wenn derzeit kein Text ausgewählt ist. Das ist nützlich, wenn Sie die Textauswahl nicht programmatisch festlegen und dafür sorgen 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 Programmfehler