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

Das ist besonders nützlich, wenn Sie sie mit der Selection API kombinieren, um Text programmatisch auszuwählen und so festzulegen, was in die Zwischenablage kopiert wird. Darauf gehen wir später in diesem Artikel noch genauer ein.

Einfaches Beispiel

Fügen wir zum Beispiel 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 unserem HTML-Code mit einer Schaltfläche hinzu, um das Kopieren 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-Code der Schaltfläche einen Klick-Ereignis-Handler hinzu, in dem wir den Text der E-Mail-Adresse aus dem Anker js-emaillink auswählen, einen Kopierbefehl ausführen, damit die E-Mail-Adresse in die Zwischenablage des Nutzers kopiert wird, 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 festzulegen, 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 „Ausschneiden“ kann für Textfelder verwendet werden, in denen Sie den Textinhalt entfernen und über die Zwischenablage zugänglich machen möchten.

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>

Wir können die Inhalte auf folgende Weise kürzen:

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 du document.execCommand() aufrufst, solltest du mit der Methode document.queryCommandSupported() prüfen, ob diese API 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

Diese Befehle werden von IE 10 und höher, Chrome 43 und höher, Firefox 41 und höher sowie Opera 29 und höher unterstützt.

Diese Befehle werden von Safari nicht unterstützt.

Bekannte Programmfehler