JS implementiert die Codefreigabe der Pasteboard-Kopierfunktion

Der Umgang mit der Zwischenablage ist eine wesentliche 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 Grundfunktionen der aktuellen Zwischenablage sind eingeschränkt, mit folgenden Einschränkungen:

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 wie folgt ermöglicht:

// 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 es nicht.

clipboard.js

Wenn Sie selbst keine robustere browserübergreifende Zwischenablagemethode implementieren möchten, kann Ihnen clipboard.js helfen. Es gibt mehrere Möglichkeiten zum Festlegen von Optionen, z. B. H5-Datenattribute, 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-Implementierung

clipboard.js ist nur 2 KB groß. Wenn nur einige der folgenden Funktionen implementiert sind, können sie innerhalb von 20 Codezeilen implementiert werden:

Nur ​​einige Formularelemente kann implementiert werden. Kopiert

In einem nicht unterstützten Browser (ja, Safari) kann der ausgewählte Text hervorgehoben werden und der Benutzer wird aufgefordert, Strg/Befehlstaste + C zu drücken.

Erstellen Sie wie bei clipboard.js zunächst eine Schaltfläche, um die Methode auszulösen. Sie verfügt über ein Datenattribut data-copytarget, 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 im obigen Beispiel, einschließlich des Codes für Stile und Animationen, der Code 20 Zeilen überschritten hat, 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, werden Sie aufgefordert
   

Andere Möglichkeiten

Es gibt viele neuartige Klemmbretter Anwendungsmethode. 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!

Verwandte Empfehlungen:

JS-Code zum Implementieren der Funktion zum Kopieren in das Pasteboard_Grundkenntnisse

JavaScript-Code zum Implementieren des Kopierens von Inhalten in das Pasteboard_Javascript-Fähigkeiten

js-Methode, um das Klicken auf das Bild zu realisieren und die Bildadresse in die Pasteboard_Javascript-Fähigkeiten zu kopieren

Das obige ist der detaillierte Inhalt vonJS implementiert die Codefreigabe der Pasteboard-Kopierfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!