So implementieren Sie die Pasteboard-Kopierfunktion mit JS

In diesem Artikel werden 20 Zeilen JS-Code analysiert, um die Pasteboard-Funktion zu implementieren. Er ist sehr gut und hat Referenzwert.

Die Verwendung der Zwischenablage ist eine grundlegende Fähigkeit. Als Programmierer sollte jeder wissen, dass Tab, Strg/Befehl + A, Strg/Befehl + C und Strg/Befehl + V Tastenkombinationen für Autofokus, Kopieren und Einfügen sind.

Aber für normale Benutzer ist es möglicherweise nicht einfach. Selbst wenn ein Benutzer weiß, was eine Zwischenablage ist, wird es (außer für) Personen mit sehr gutem Sehvermögen oder schnellen Reflexen schwierig sein, genau den gewünschten Text hervorzuheben. Wenn der Benutzer die Tastenkombinationen nicht kennt, das versteckte Bearbeitungsmenü nicht sehen kann, noch nie das Rechtsklick-Menü verwendet hat oder nicht weiß, dass durch langes Drücken des Touchscreens das Optionsmenü angezeigt wird, wird er dies tun Wahrscheinlich kenne ich die Kopierfunktion nicht.

Sollten wir also eine Schaltfläche „In die Zwischenablage kopieren“ bereitstellen, um dem Benutzer zu helfen? Diese Funktion dürfte auch für Benutzer nützlich sein, die mit Tastaturkürzeln bestens vertraut sind.

Über die Sicherheit der Zwischenablage

Vor einigen Jahren war es für Browser unmöglich, die Zwischenablage direkt zu verwenden. Entwickler mussten es über Flash implementieren.

Die Zwischenablage mag belanglos erscheinen, aber stellen Sie sich vor, was passieren würde, wenn der Browser den Inhalt nach Belieben sehen und bearbeiten könnte. JS-Skripte (einschließlich Skripte von Drittanbietern) können die Textinformationen in der Zwischenablage anzeigen und Passwörter, vertrauliche Informationen oder sogar ganze Dokumente an den Remote-Server senden.

Die aktuelle Zwischenablage verfügt über eingeschränkte Grundfunktionen und weist folgende Einschränkungen auf:

1. Die meisten Browser unterstützen die Zwischenablage, außer Safari.

2. Die Unterstützung variiert je nach Browser und einige Funktionen sind unvollständig oder fehlerhaft.

3. Das Ereignis muss vom Benutzer initiiert werden, z. B. durch Klicken mit der Maus oder Drücken der Tastatur. Das Skript hat keinen freien Zugriff auf die Zwischenablage.

document.execCommand（）

Diese Methode ist der Schlüssel zur Implementierung der Zwischenablage. Sie kann drei Parameter übergeben: Ausschneiden, Kopieren und Einfügen. Beginnen wir mit dem am häufigsten verwendeten document.execCommand（'copy'）.

Bevor wir es verwenden, sollten wir prüfen, ob der Browser den Kopierbefehl unterstützt: document.queryCommandSupported('copy'); oder document.queryCommandEnabled('copy'); , diese beiden Methoden haben den gleichen Effekt.

Obwohl Chrome unter Chrome die Verwendung von Kopiennamen unterstützt, geben beide Methoden false zurück. Daher ist es besser, den Prüfcode in einen Try-Catch-Block zu packen.

Was sollen wir den Benutzern im nächsten Schritt zum Kopieren gestatten? Text muss hervorgehoben werden, und alle Browser können die Methode select() verwenden, um Text innerhalb der Texteingabe und des Textbereichs auszuwählen. Gleichzeitig unterstützen Firefox und Chrome/Opera auch die document.createRange -Methode, die die Auswahl von Text aus jedem Element ermöglicht, wie folgt:

// select text in #myelement node
  var
   myelement = document.getElementById('#myelement'),
   range = document.createRange();
  range.selectNode(myelement);
  window.getSelection().addRange(range);

, aber IE/Edge unterstützt sie nicht.

clipboard.js

Wenn Sie selbst keine robustere browserübergreifende Zwischenablagemethode implementieren möchten, kann Ihnen clipboard.js helfen. Es gibt mehrere Möglichkeiten, Optionen festzulegen, z. B. das Datenattribut von H5, das Festlegen von Bindungsauslöseelementen und Zielelementen, z. B.:

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

Do it yourself

Zwischenablage Die . Die js-Größe beträgt nur 2 KB. Wenn nur einige der folgenden Funktionen implementiert sind, können sie innerhalb von 20 Codezeilen implementiert werden:

Nur ​​einige Formularelemente können kopiert werden

In einem nicht unterstützten Browser (ja, Safari) können Sie den ausgewählten Text markieren und den Benutzer auffordern, Strg/Befehlstaste + C zu drücken.

Erstellen Sie wie bei clipboard.js zunächst eine Schaltfläche zum Auslösen der Methode, die über ein Datenattribut data-copytarget verfügt, das auf das zu kopierende Element (z. B. #website) verweist

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand(&#39;copy&#39;) ,。若失败，文本保持选中状态，显示提示框：
(function() {
 &#39;use strict&#39;;
 // click events
 document.body.addEventListener(&#39;click&#39;, copy, true);
 // event handler
 function copy(e) {
  // find target element
  var
   t = e.target,
   c = t.dataset.copytarget,
   inp = (c ? document.querySelector(c) : null);
  // is element selectable?
  if (inp && inp.select) {
   // select text
   inp.select();
   try {
    // copy text
    document.execCommand(&#39;copy&#39;);
    inp.blur();
   }
   catch (err) {
    alert(&#39;please press Ctrl/Cmd+C to copy&#39;);
   }
  }
 }
})();

Beispiel

Obwohl der Code im obigen Beispiel einschließlich des Codes für Stile und Animationen mehr als 20 Zeilen umfasst, sind Animationen und Stile optional.

Zusammenfassung:

1. Wählen Sie den Inhalt des zu kopierenden Formularelements über .select() aus

2. Dokument aufrufen. execCommand( "copy")-Methode

3. ruft die .blur()-Methode auf, um den Fokus vom Formularelement zu entfernen

4. Schritte 2 und einschließen 3 Wenn der Browser dies im Try-Catch-Block nicht unterstützt, wird

Andere Möglichkeiten

Es gibt viele neue Möglichkeiten dazu Übernehmen Sie die Zwischenablage. Wenn Sie beispielsweise bei Trello.com mit der Maus über eine Karte fahren, können Sie Ctrl / Cmd + C drücken und die Linkadresse der Karte in Ihre Zwischenablage kopieren. Die Implementierung dahinter besteht darin, zunächst ein verstecktes Formularelement mit der URL zu erstellen und dann dessen Inhalt auszuwählen und zu kopieren. Sehr clever und nützlich – ich vermute, dass nur sehr wenige Benutzer von dieser Funktion wissen!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine kreisförmige Nodelist-Dom-Liste mit JS

So erreichen Sie eine Änderung der Textfarbe nach dem Klicken in Vue

So legen Sie die Hintergrundfarbe für eine separate Seite in Vue-cli fest

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Pasteboard-Kopierfunktion mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!