Befehle zum Ausschneiden und Kopieren

Matt Gaunt
X Startseite

Ab IE10 wird jetzt "Cut" unterstützt. und „kopieren“ Befehle über die Document.execCommand() . Ab Chrome-Version 43 werden diese Befehle auch in Chrome unterstützt.

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

Dies ist besonders nützlich, wenn Sie es mit der Selection API kombinieren, um automatisch Text auswählen, um zu bestimmen, was in die Zwischenablage kopiert wird. werden wir uns später in diesem Artikel genauer ansehen.

Einfaches Beispiel

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

Wir fügen die E-Mail-Adresse in unseren HTML-Code mit einer Schaltfläche hinzu, über die der Kopiervorgang gestartet wird, 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 wollen wir in unserem JavaScript-Code einen Klick-Ereignis-Handler zu unserer Schaltfläche in Wir wählen den Text der E-Mail-Adresse aus dem Anker js-emaillink aus, führen eine Kopie sodass sich die E-Mail-Adresse in der Zwischenablage des Nutzers befindet. Heben Sie die Auswahl der E-Mail-Adresse auf, 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 Auswahl programmatisch festzulegen zum Anker hinzu. Das ist der Text, die Sie in die Zwischenablage kopieren möchten. Nach dem Aufruf von „document.execCommand()“ können Sie die Auswahl entfernen, indem Sie window.getSelection().removeAllRanges() zur Verfügung steht. Wenn Sie überprüfen möchten, ob alles wie erwartet funktioniert hat, können Sie das Antwort von document.execCommand() wird „false“ zurückgegeben, wenn der Befehl nicht unterstützt oder aktiviert ist. Wir packen „execCommand()“ in einem „try andcat“-Befehl ein, da der „cut“ und „kopieren“ Befehle können einen Fehler auslösen in verschiedenen Szenarien.

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

Verwenden eines Textbereichs und einer Schaltfläche im 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 unterstützt durch den document.queryCommandSupported() . Im Beispiel oben könnten wir den Status der Schaltfläche auf „Deaktiviert“ setzen. Support zu finden:

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

Der Unterschied zwischen document.queryCommandSupported() und document.queryCommandEnabled() dass das Ausschneiden und Kopieren von einem Browser unterstützt werden könnte, aber wenn derzeit kein Text ausgewählt ist, werden sie nicht aktiviert. Dies ist nützlich, wenn Sie die Textauswahl 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