suchen

Heim >Web-Frontend >js-Tutorial >So kopieren Sie Inhalte in die Zwischenablage in JS

So kopieren Sie Inhalte in die Zwischenablage in JS

php中世界最好的语言
php中世界最好的语言Original
2018-04-12 15:54:012380Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Inhalte mit JS in die Zwischenablage kopieren. Was sind die Vorsichtsmaßnahmen für das Kopieren von Inhalten in die Zwischenablage mit JS? Ein praktischer Fall. Stehen Sie auf und schauen Sie sich das an.

Gemeinsame Methoden

Nach der Überprüfung des allmächtigen Google sind die gängigen Methoden nun hauptsächlich die folgenden zwei:

Bibliothek eines Drittanbieters: clipboard.js
Native Methode: document.execCommand()

Schauen wir uns an, wie diese beiden Methoden verwendet werden.

clipboard.js

Dies ist die offizielle Website von Clipboard: https://clipboardjs.com/, es scheint so einfach zu sein.

Zitat

Direktes Zitat:

Paket: npm install clipboard --save , dann import Clipboard from 'clipboard';

Verwenden Sie

Aus dem Eingabefeld kopieren
Da sich nun ein <input>-Tag auf der Seite befindet, müssen wir den darin enthaltenen Inhalt kopieren. Wir können Folgendes tun: 

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>
import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');

Beachten Sie, dass dem Tag <button> ein data-clipboard-target -Attribut hinzugefügt wird und sein Wert der <input> des zu kopierenden id ist. Wie der Name schon sagt, wird der Inhalt vom gesamten Tag kopiert.

Direkt kopieren

Manchmal möchten wir den Inhalt nicht von <input> kopieren, sondern den Wert einfach direkt aus der Variablen abrufen. Wenn wir in Vue das tun könnten: 

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';

Veranstaltung

Manchmal müssen wir nach dem Kopieren etwas tun. In diesem Fall benötigen wir die Unterstützung der Rückruffunktion .

Fügen Sie der Verarbeitungsfunktion den folgenden Code hinzu: 

// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
 console.info('Action:', e.action); // 动作名称，比如：Action: copy
 console.info('Text:', e.text); // 内容，比如：Text：hello word
 console.info('Trigger:', e.trigger); // 触发元素：比如：<button class="btn" :data-clipboard-text="copyValue">点我复制</button>
 e.clearSelection(); // 清除选中内容
});
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

Zusammenfassung

Das Dokument erwähnt auch, dass Sie bei der Verwendung von clipboard auf einer einzelnen Seite daran denken sollten, nach der Verwendung zu zerstören, um die Verwaltung des Lebenszyklus btn.destroy() eleganter zu gestalten.

Ist die Verwendung der Zwischenablage nicht sehr einfach? Ist es jedoch nicht elegant genug, zusätzliche Bibliotheken von Drittanbietern nur für eine Kopierfunktion zu verwenden? Was sollten wir jetzt tun? Verwenden Sie dann native Methoden, um dies zu erreichen.

document.execCommand()-Methode

Schauen wir uns zunächst an, wie diese Methode auf MDN definiert ist:

Dies ermöglicht die Ausführung von Befehlen zur Bearbeitung des Inhalts des bearbeitbaren Bereichs

Das bedeutet, dass Befehle ausgeführt werden können, um den Inhalt des bearbeitbaren Bereichs zu manipulieren. Beachten Sie, dass es sich um einen bearbeitbaren Bereich handelt.

Definition

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

Die Methode gibt einen booleschen Wert zurück, der angibt, ob der Vorgang erfolgreich war.

  • aCommandName: Stellt den Befehlsnamen dar, z. B. „Kopieren“, „Ausschneiden“ usw. (weitere Befehle finden Sie unter „Befehle“). aShowDefaultUI: Gibt an, ob die Benutzeroberfläche angezeigt werden soll, normalerweise „false“; >

    • aValueArgument: Einige Befehle erfordern zusätzliche Parameter, die im Allgemeinen nicht verwendet werden
  • <p>

  • <p>Kompatibilität

Eigentlich war die Kompatibilität dieser Methode früher nicht sehr gut, aber glücklicherweise ist sie mittlerweile grundsätzlich mit allen gängigen Browsern kompatibel und kann auch auf mobilen Endgeräten genutzt werden.

Verwenden Sie

从输入框复制
现在页面上有一个 <input> 标签，我们想要复制其中的内容，我们可以这样做：

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

js代码

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
})

其它地方复制

有的时候页面上并没有 <input> 标签，我们可能需要从一个 <p> 中复制内容，或者直接复制变量。

还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、