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“; >
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>、