So kopieren Sie Inhalte in JavaScript in die Zwischenablage

Auf einer aktuellen Veranstaltungsseite gibt es eine kleine Anforderung. Benutzer können den Inhalt durch Klicken oder langes Drücken in die Zwischenablage kopieren und den Implementierungsprozess aufzeichnen. Freunde in Not können darauf verweisen.

Gemeinsame Methoden

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

Drittanbieter-Bibliothek: clipboard.js
Native Methode: document . execCommand()

Sehen 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:

<script src="dist/clipboard.min.js"></script>

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

Kopieren aus dem EingabefeldJetzt gibt es ein d5fd7aea971a85678ba271703566ebfd-Tag, wir müssen den Inhalt darin kopieren, wir können das 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 ein

-Attribut hinzugefügt wird und sein Wert der

ist, der kopiert werden muss 🎜> Der Name deutet darauf hin, dass der Inhalt des gesamten Tags kopiert wird.

bb9345e55eb71822850ff156dfde57c8data-clipboard-target Direkt kopieren d5fd7aea971a85678ba271703566ebfdid

Manchmal möchten wir den Inhalt nicht von d5fd7aea971a85678ba271703566ebfd kopieren, sondern einfach den Wert direkt von der Variablen erhalten. Wenn wir dies in Vue tun können:

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>

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

Event

Manchmal müssen wir kopieren, um etwas zu tun, Sie benötigen die Unterstützung der Rückruffunktion.

Fügen Sie den folgenden Code zur Verarbeitungsfunktion 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 auch erwähnt Ja, wenn Sie

auf einer einzelnen Seite verwenden, denken Sie daran, nach der Verwendung zu zerstören, um das Lebenszyklusmanagement eleganter zu gestalten.

Die Zwischenablage ist sehr einfach zu verwenden. 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.

clipboardbtn.destroy() document.execCommand()-Methode

Schauen Sie sich zunächst an, wie diese Methode auf

definiert ist: die es einem ermöglicht, Befehle auszuführen Bearbeiten Sie den Inhalt des bearbeitbaren Bereichs.

MDN bedeutet, dass Befehle ausgeführt werden können, um den Inhalt des bearbeitbaren Bereichs zu bearbeiten. 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: Gibt den Befehlsnamen an, z. B.: Kopieren, Ausschneiden usw. (weitere Befehle finden Sie unter Befehle);

• aShowDefaultUI: Ob die Benutzeroberfläche angezeigt werden soll, normalerweise falsch;

• aValueArgument: Einige Befehle erfordern zusätzliche Parameter, die im Allgemeinen nicht verwendet werden; > kompatibler Sex

Die Kompatibilität dieser Methode war vorher eigentlich 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.

Kopieren aus dem Eingabefeld mit

Jetzt gibt es auf der gewünschten Seite ein d5fd7aea971a85678ba271703566ebfd-Tag zum Kopieren Für den Inhalt können wir Folgendes tun:

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

js-Code

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

An anderer Stelle kopieren

Manchmal gibt es kein

-Tag auf der Seite. Möglicherweise müssen wir den Inhalt von einem

kopieren oder die Variable direkt kopieren.

Denken Sie daran, dass in der Definition der

-Methode erwähnt wurde, dass sie nur auf bearbeitbare Bereiche angewendet werden kann, was bedeutet, dass sie außer für Eingabefelder wie d5fd7aea971a85678ba271703566ebfd nicht verwendet werden kann ; Diese Methode.

In dieser Zeit müssen wir das Land retten.

0daa849bc639fff17b006ca8cf3a07caZum Kopieren auf mich klicken65281c5ac262bf6d81768915a4a77ac0

d5fd7aea971a85678ba271703566ebfdjs-Codee388a4556c0f65e1904146cc1a846bee

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
	document.body.appendChild(input);
 	input.setAttribute('value', '听说你想复制我');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

execCommand()

Es kann als Erfolg bei der Rettung des Landes durch Kurven gewertet werden. Bei der Verwendung dieser Methode bin ich auf mehrere Fallstricke gestoßen.

Aufgetretene Fallstricke

Beim Debuggen unter Chrome funktioniert diese Methode perfekt. Als es dann darum ging, das mobile Endgerät zu debuggen, kam die Grube zum Vorschein.

Ja, das stimmt, du bist es, ios. . .

1. Wenn Sie auf „Kopieren“ klicken, erscheint am unteren Bildschirmrand ein weißes Flackern. Wenn Sie genau hinsehen, können Sie die Tastatur sofort herausziehen und weglegen

Sie werden wissen, was den Jitter verursacht. Es ist einfacher zu lösen. Da die Tastatur aktiviert ist, wird das Eingabefeld einfach für die Eingabe deaktiviert. Fügen Sie dem Code input.setAttribute('readonly'); . Ja, die Tastatur wird nicht hochgezogen.

2. Kopieren nicht möglich

这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。

完整代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
 input.setAttribute('readonly', 'readonly');
 input.setAttribute('value', 'hello world');
 document.body.appendChild(input);
	input.setSelectionRange(0, 9999);
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细讲解使用Node.js写一个简单的命令行工具（详细教程）

在Node.js中使用cheerio制作简单的网页爬虫（详细教程）

在vue中如何实现父组件向子组件传递多个数据

Das obige ist der detaillierte Inhalt vonSo kopieren Sie Inhalte in JavaScript in die Zwischenablage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!